sh-ui-cli 0.58.2 → 0.58.4

package/data/registry/react/components/sidebar/index.tailwind.tsx

@@ -233,7 +233,7 @@ export function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerP
     <button
       type="button"
       aria-label="Toggle Sidebar"
-      className={cn("inline-flex items-center justify-center w-8 h-8 border border-transparent bg-transparent text-foreground-muted rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,color,border-color] duration-[var(--duration-fast)] hover:bg-[var(--sidebar-accent)] hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
+      className={cn("inline-flex items-center justify-center w-8 h-8 border border-transparent bg-transparent text-foreground-muted rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,color,border-color] duration-[var(--duration-fast)] hover:bg-[var(--sidebar-accent)] hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none",
         className)}
       onClick={(e) => { onClick?.(e); toggleSidebar(); }}
       {...props}
@@ -356,7 +356,7 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
 }
 
 const menuButtonBase =
-  "flex w-full items-center gap-[var(--space-2)] p-[var(--space-2)] text-left text-[length:var(--text-sm)] text-[var(--sidebar-fg)] bg-transparent border-none rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] no-underline font-[inherit] leading-snug [&>svg]:w-4 [&>svg]:h-4 [&>svg]:shrink-0 [&>span]:flex-1 [&>span]:min-w-0 [&>span]:overflow-hidden [&>span]:[text-overflow:ellipsis] [&>span]:whitespace-nowrap hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-accent-fg)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:[outline-offset:-2px] data-[active]:bg-primary data-[active]:text-primary-foreground data-[active]:font-semibold data-[active]:hover:bg-primary-hover disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none aria-disabled:opacity-[var(--opacity-disabled)] aria-disabled:pointer-events-none [[data-state=collapsed][data-collapsible=icon]_&]:justify-center [[data-state=collapsed][data-collapsible=icon]_&]:p-[var(--space-2)] [[data-state=collapsed][data-collapsible=icon]_&>span]:hidden motion-reduce:transition-none";
+  "flex w-full items-center gap-[var(--space-2)] p-[var(--space-2)] text-left text-[length:var(--text-sm)] text-[var(--sidebar-fg)] bg-transparent border-none rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] no-underline font-[inherit] leading-snug [&>svg]:w-4 [&>svg]:h-4 [&>svg]:shrink-0 [&>span]:flex-1 [&>span]:min-w-0 [&>span]:overflow-hidden [&>span]:[text-overflow:ellipsis] [&>span]:whitespace-nowrap hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-accent-fg)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:[outline-offset:-2px] data-[active]:bg-primary data-[active]:text-primary-foreground data-[active]:font-semibold data-[active]:hover:bg-primary-hover disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none aria-disabled:opacity-[var(--opacity-disabled)] aria-disabled:pointer-events-none [[data-state=collapsed][data-collapsible=icon]_&]:justify-center [[data-state=collapsed][data-collapsible=icon]_&]:p-[var(--space-2)] [[data-state=collapsed][data-collapsible=icon]_&>span]:hidden motion-reduce:transition-none";
 
 const menuButtonSize = {
   sm: "h-7 py-[var(--space-1)] px-[var(--space-2)] text-[0.8125rem]",

package/data/registry/react/components/sidebar/styles.css

@@ -163,7 +163,7 @@
   color: var(--foreground);
 }
 .sh-ui-sidebar__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -364,7 +364,7 @@
   color: var(--sidebar-accent-fg);
 }
 .sh-ui-sidebar__menu-button:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: -2px;
 }
 .sh-ui-sidebar__menu-button[data-active] {

package/data/registry/react/components/sidebar/styles.module.css

@@ -163,7 +163,7 @@
   color: var(--foreground);
 }
 .sidebar__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -364,7 +364,7 @@
   color: var(--sidebar-accent-fg);
 }
 .sidebar__menu-button:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: -2px;
 }
 .sidebar__menu-button[data-active] {

package/data/registry/react/components/slider/index.tailwind.tsx

@@ -242,7 +242,7 @@ export const SliderThumb = React.forwardRef<
       aria-disabled={disabled || undefined}
       onKeyDown={onKeyDown}
       className={cn(
-        "absolute top-1/2 w-4 h-4 -ml-2 -translate-y-1/2 bg-background border-2 border-primary rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.1)] cursor-grab transition-transform duration-[80ms] active:cursor-grabbing active:scale-110 active:-translate-y-1/2 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 [@media(hover:none)_and_(pointer:coarse)]:-ml-2.5",
+        "absolute top-1/2 w-4 h-4 -ml-2 -translate-y-1/2 bg-background border-2 border-primary rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.1)] cursor-grab transition-transform duration-[80ms] active:cursor-grabbing active:scale-110 active:-translate-y-1/2 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 [@media(hover:none)_and_(pointer:coarse)]:-ml-2.5",
         className,
       )}
       style={{ left: percent, ...style }}

package/data/registry/react/components/slider/styles.css

@@ -50,7 +50,7 @@
   transform: translateY(-50%) scale(1.1);
 }
 .sh-ui-slider__thumb:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/slider/styles.module.css

@@ -50,7 +50,7 @@
   transform: translateY(-50%) scale(1.1);
 }
 .slider__thumb:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/switch/index.tailwind.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@SH_UI_UTILS@";
 const switchRoot = cva(
-  "inline-flex items-center border-none rounded-full bg-background-muted cursor-pointer shrink-0 p-0.5 transition-colors duration-150 hover:not-data-[disabled]:bg-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:hover:not-data-[disabled]:bg-primary-hover data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none",
+  "inline-flex items-center border-none rounded-full bg-background-muted cursor-pointer shrink-0 p-0.5 transition-colors duration-150 hover:not-data-[disabled]:bg-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:hover:not-data-[disabled]:bg-primary-hover data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none",
   {
     variants: {
       size: {

package/data/registry/react/components/switch/styles.css

@@ -29,7 +29,7 @@
 }
 
 .sh-ui-switch:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/switch/styles.module.css

@@ -29,7 +29,7 @@
 }
 
 .switch:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/tabs/index.tailwind.tsx

@@ -65,7 +65,7 @@ export const TabsTrigger = React.forwardRef<
   <BaseTabs.Tab
     ref={ref}
     className={cn(
-      "relative z-[1] inline-flex items-center justify-center gap-1.5 py-[var(--space-2)] px-[var(--space-3)] bg-transparent text-foreground-muted border-0 text-[length:var(--text-sm)] font-medium leading-none cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] select-none whitespace-nowrap hover:not-disabled:not-data-[selected]:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[selected]:text-foreground disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
+      "relative z-[1] inline-flex items-center justify-center gap-1.5 py-[var(--space-2)] px-[var(--space-3)] bg-transparent text-foreground-muted border-0 text-[length:var(--text-sm)] font-medium leading-none cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] select-none whitespace-nowrap hover:not-disabled:not-data-[selected]:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[selected]:text-foreground disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
       triggerVariantClasses,
       className,
     )}
@@ -100,7 +100,7 @@ export const TabsContent = React.forwardRef<
   <BaseTabs.Panel
     ref={ref}
     className={cn(
-      "outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[var(--radius)]",
+      "outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 focus-visible:rounded-[var(--radius)]",
       className,
     )}
     {...props}

package/data/registry/react/components/tabs/styles.css

@@ -48,7 +48,7 @@
 }
 
 .sh-ui-tabs__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -77,7 +77,7 @@
 }
 
 .sh-ui-tabs__content:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
   border-radius: var(--radius);
 }

package/data/registry/react/components/tabs/styles.module.css

@@ -48,7 +48,7 @@
 }
 
 .tabs__trigger:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -77,7 +77,7 @@
 }
 
 .tabs__content:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
   border-radius: var(--radius);
 }

package/data/registry/react/components/textarea/index.tailwind.tsx

@@ -9,7 +9,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     <textarea
       ref={ref}
       className={cn(
-        "block w-full min-h-20 px-[var(--space-3)] py-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-normal resize-y transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]",
+        "block w-full min-h-20 px-[var(--space-3)] py-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-normal resize-y transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-primary focus:shadow-[0_0_0_1px_var(--primary)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]",
         className,
       )}
       {...props}

package/data/registry/react/components/textarea/styles.css

@@ -31,8 +31,8 @@
 
 .sh-ui-textarea:focus {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .sh-ui-textarea:disabled {

package/data/registry/react/components/textarea/styles.module.css

@@ -31,8 +31,8 @@
 
 .textarea:focus {
   outline: none;
-  border-color: var(--foreground);
-  box-shadow: 0 0 0 1px var(--foreground);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .textarea:disabled {

package/data/registry/react/components/toast/index.tailwind.tsx

@@ -133,7 +133,7 @@ function ToastCard({ item, onDismiss }: { item: ToastItem; onDismiss: () => void
       )}
       <button
         type="button"
-        className="absolute top-1.5 right-1.5 inline-flex items-center justify-center w-6 h-6 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted text-[length:var(--text-sm)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background-muted hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none"
+        className="absolute top-1.5 right-1.5 inline-flex items-center justify-center w-6 h-6 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted text-[length:var(--text-sm)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background-muted hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none"
         onClick={() => setExiting(true)}
         aria-label="닫기"
       >

package/data/registry/react/components/toast/styles.css

@@ -276,7 +276,7 @@
 }
 
 .sh-ui-toast__close:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/toast/styles.module.css

@@ -276,7 +276,7 @@
 }
 
 .toast__close:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/toggle/index.tailwind.tsx

@@ -8,7 +8,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@SH_UI_UTILS@";
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-1.5 border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer text-foreground-muted bg-transparent transition-[background-color,color,border-color] duration-[var(--duration-fast)] select-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none data-[pressed]:bg-background-muted data-[pressed]:text-foreground motion-reduce:transition-none",
+  "inline-flex items-center justify-center gap-1.5 border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer text-foreground-muted bg-transparent transition-[background-color,color,border-color] duration-[var(--duration-fast)] select-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none data-[pressed]:bg-background-muted data-[pressed]:text-foreground motion-reduce:transition-none",
   {
     variants: {
       variant: {

package/data/registry/react/components/toggle/styles.css

@@ -56,7 +56,7 @@
 
 /* focus */
 .sh-ui-toggle:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/data/registry/react/components/toggle/styles.module.css

@@ -56,7 +56,7 @@
 
 /* focus */
 .toggle:focus-visible {
-  outline: var(--border-width-strong) solid var(--foreground);
+  outline: var(--border-width-strong) solid var(--ring);
   outline-offset: 2px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.58.2",
+  "version": "0.58.4",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css

@@ -16,6 +16,7 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-foreground: #FFFFFF;
 }

package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css

@@ -16,6 +16,7 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-foreground: #FFFFFF;
 }

package/templates/nextjs-standalone/app/globals.css

@@ -21,6 +21,7 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-foreground: var(--danger-foreground);
   --color-success: var(--success);

package/templates/ui-app-template/src/styles/globals.css

@@ -25,6 +25,7 @@
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary-hover: var(--primary-hover);
+  --color-ring: var(--ring);
   --color-danger: var(--danger);
   --color-danger-foreground: var(--danger-foreground);
   --color-success: var(--success);

package/templates/ui-app-template/src/styles/tokens.css

@@ -16,6 +16,7 @@
   --primary: #171717;
   --primary-foreground: #FAFAFA;
   --primary-hover: #262626;
+  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
   --danger: #DC2626;
   --danger-foreground: #FFFFFF;
 }