feat: add inner ring toggle prop to kbd component

lovrozagar · Oct 14, 2024 · 3cd0963 · 3cd0963
1 parent 6033d9f
commit 3cd0963
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/kbd/components/kbd.tsx b/src/components/kbd/components/kbd.tsx
@@ -2,18 +2,18 @@
 
 import { cn, polymorphic } from '@renderui/utils'
 
-import { DEFAULT_KBD_CLASSNAME } from '@/components/kbd/constants/constants'
+import { DEFAULT_KBD_CLASSNAME, KBD_INNER_RING_CLASSNAME } from '@/components/kbd/constants/constants'
 import type { KbdProps } from '@/components/kbd/types/kbd'
 import type { CSSProperties } from 'react'
 
 const Kbd = (props: KbdProps) => {
-	const { asChild, children, className, style, color = 'mode-accent', ...restProps } = props
+	const { asChild, children, className, style, hasInnerRing = true, color = 'mode-accent', ...restProps } = props
 
 	const Component = polymorphic(asChild, 'kbd')
 
 	return (
 		<Component
-			className={cn(DEFAULT_KBD_CLASSNAME, className)}
+			className={cn(DEFAULT_KBD_CLASSNAME, hasInnerRing ? KBD_INNER_RING_CLASSNAME : undefined, className)}
 			style={
 				{
 					...style,

diff --git a/src/components/kbd/constants/constants.ts b/src/components/kbd/constants/constants.ts
@@ -1,6 +1,6 @@
 const DEFAULT_KBD_CLASSNAME =
-	'_kbd flex justify-center items-center gap-1 text-xs text-[rgba(var(--kbd-color))] bg-[rgba(var(--kbd-bg))] font-[unset] font-medium rounded-md px-2 py-1.5 duration-fast transition-[background-color,box-shadow] shadow-[inset_0_-0.05em_0.5em_#00005506,inset_0_0.05em_hsla(0,0%,100%,0.95),inset_0_0.25em_0.5em_#00005506,inset_0_-0.05em_#00002f26,0_0_0_0.05em_#0009321f,0_0.08em_0.17em_#00062e32] dark:shadow-[inset_0_-0.05em_0.5em_#ddeaf814,inset_0_0.05em_#f1f7feb5,inset_0_0.25em_0.5em_#d8f4f609,inset_0_-0.1em_rgba(0,0,0,0.9),0_0_0_0.075em_#d9edff40,0_0.08em_0.17em_rgba(0,0,0,0.95)]'
+	'_kbd flex justify-center items-center gap-1 text-xs text-[rgba(var(--kbd-color))] bg-[rgba(var(--kbd-bg))] font-[unset] font-medium rounded-md px-2 py-1.5 duration-fast transition-[background-color,box-shadow]'
 
-const DEFAULT_KBD_ICON_CLASSNAME = 'block h-4 w-4 fill-none stroke-current stroke-[1px]'
+const KBD_INNER_RING_CLASSNAME = 'shadow-[inset_0_-0.05em_0.5em_#00005506,inset_0_0.05em_hsla(0,0%,100%,0.95),inset_0_0.25em_0.5em_#00005506,inset_0_-0.05em_#00002f26,0_0_0_0.05em_#0009321f,0_0.08em_0.17em_#00062e32] dark:shadow-[inset_0_-0.05em_0.5em_#ddeaf814,inset_0_0.05em_#f1f7feb5,inset_0_0.25em_0.5em_#d8f4f609,inset_0_-0.1em_rgba(0,0,0,0.9),0_0_0_0.075em_#d9edff40,0_0.08em_0.17em_rgba(0,0,0,0.95)]'
 
-export { DEFAULT_KBD_CLASSNAME, DEFAULT_KBD_ICON_CLASSNAME }
+export { DEFAULT_KBD_CLASSNAME, KBD_INNER_RING_CLASSNAME }
diff --git a/src/components/kbd/types/kbd.ts b/src/components/kbd/types/kbd.ts
@@ -7,6 +7,7 @@ type KbdCustomProps = {
 	asChild?: boolean
 	color?: Color
 	hasIcon?: boolean
+	hasInnerRing?: boolean
 	iconPosition?: 'start' | 'end'
 }