@dezkareid/components 1.0.0 → 1.0.2

package/src/css/theme-toggle.module.css

@@ -36,3 +36,29 @@
   color: var(--color-primary);
   border-color: var(--color-primary);
 }
+
+/* --- Structure: icon --- */
+.theme-toggle__icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+
+/* --- Structure: wrapper --- */
+.theme-toggle__wrapper {
+  display: inline-flex;
+  position: relative;
+}
+
+/* --- Utility: visually hidden live region --- */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/react/Button/index.test.tsx

@@ -11,14 +11,14 @@ describe('Button', () => {
 
   it('renders primary variant', () => {
     render(<Button variant="primary">Primary</Button>);
-    const btn = screen.getByRole('button');
-    expect(btn.className).toMatch(/button--primary/);
+    const button = screen.getByRole('button');
+    expect(button.className).toMatch(/button--primary/);
   });
 
   it('renders secondary variant', () => {
     render(<Button variant="secondary">Secondary</Button>);
-    const btn = screen.getByRole('button');
-    expect(btn.className).toMatch(/button--secondary/);
+    const button = screen.getByRole('button');
+    expect(button.className).toMatch(/button--secondary/);
   });
 
   it('renders sm size', () => {
@@ -38,9 +38,9 @@ describe('Button', () => {
 
   it('is disabled when disabled prop is set', () => {
     render(<Button disabled>Disabled</Button>);
-    const btn = screen.getByRole('button');
-    expect(btn).toBeDisabled();
-    expect(btn.className).toMatch(/button--disabled/);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button.className).toMatch(/button--disabled/);
   });
 
   it('does not fire onClick when disabled', async () => {
@@ -56,4 +56,14 @@ describe('Button', () => {
     await userEvent.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledOnce();
   });
+
+  it('has aria-disabled when disabled', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('does not have aria-disabled when enabled', () => {
+    render(<Button>Enabled</Button>);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'false');
+  });
 });

package/src/react/Button/index.tsx

@@ -1,9 +1,9 @@
 import type { ButtonHTMLAttributes } from 'react';
 import cx from 'classnames';
-import type { ButtonProps } from '../../shared/types/button';
+import type { ButtonProperties } from '../../shared/types/button';
 import styles from '../../css/button.module.css';
 
-type Props = ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type Properties = ButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function Button({
   variant = 'primary',
@@ -12,7 +12,7 @@ export function Button({
   children,
   className,
   ...rest
-}: Props) {
+}: Properties) {
   return (
     <button
       className={cx(
@@ -23,6 +23,7 @@ export function Button({
         className,
       )}
       disabled={disabled}
+      aria-disabled={disabled}
       {...rest}
     >
       {children}

package/src/react/Card/index.test.tsx

@@ -26,13 +26,23 @@ describe('Card', () => {
 
   it('applies flat elevation when set', () => {
     const { container } = render(<Card elevation="flat">Content</Card>);
-    const el = container.firstChild as HTMLElement;
-    expect(el.className).toMatch(/card--flat/);
-    expect(el.className).not.toMatch(/card--raised/);
+    const element = container.firstChild as HTMLElement;
+    expect(element.className).toMatch(/card--flat/);
+    expect(element.className).not.toMatch(/card--raised/);
   });
 
   it('applies raised elevation when explicitly set', () => {
     const { container } = render(<Card elevation="raised">Content</Card>);
     expect((container.firstChild as HTMLElement).className).toMatch(/card--raised/);
   });
+
+  it('forwards role prop to root element', () => {
+    render(<Card role="article">Content</Card>);
+    expect(screen.getByRole('article')).toBeInTheDocument();
+  });
+
+  it('applies card--flat class when elevation is flat', () => {
+    const { container } = render(<Card elevation="flat">Content</Card>);
+    expect((container.firstChild as HTMLElement).className).toMatch(/card--flat/);
+  });
 });

package/src/react/Card/index.tsx

@@ -1,11 +1,11 @@
 import type { HTMLAttributes } from 'react';
 import cx from 'classnames';
-import type { CardProps } from '../../shared/types/card';
+import type { CardProperties } from '../../shared/types/card';
 import styles from '../../css/card.module.css';
 
-type Props = CardProps & HTMLAttributes<HTMLDivElement>;
+type Properties = CardProperties & HTMLAttributes<HTMLDivElement>;
 
-export function Card({ elevation = 'raised', children, className, ...rest }: Props) {
+export function Card({ elevation = 'raised', children, className, ...rest }: Properties) {
   return (
     <div className={cx(styles.card, styles[`card--${elevation}`], className)} {...rest}>
       {children}

package/src/react/Tag/index.test.tsx

@@ -32,4 +32,14 @@ describe('Tag', () => {
     render(<Tag>No variant</Tag>);
     expect(screen.getByText('No variant').className).toMatch(/tag--default/);
   });
+
+  it('renders warning variant', () => {
+    render(<Tag variant="warning">Warning</Tag>);
+    expect(screen.getByText('Warning').className).toMatch(/tag--warning/);
+  });
+
+  it('forwards aria-label to root span', () => {
+    render(<Tag variant="success" aria-label="Success status">Active</Tag>);
+    expect(screen.getByLabelText('Success status')).toBeInTheDocument();
+  });
 });

package/src/react/Tag/index.tsx

@@ -1,11 +1,11 @@
 import type { HTMLAttributes } from 'react';
 import cx from 'classnames';
-import type { TagProps } from '../../shared/types/tag';
+import type { TagProperties } from '../../shared/types/tag';
 import styles from '../../css/tag.module.css';
 
-type Props = TagProps & HTMLAttributes<HTMLSpanElement>;
+type Properties = TagProperties & HTMLAttributes<HTMLSpanElement>;
 
-export function Tag({ variant = 'default', children, className, ...rest }: Props) {
+export function Tag({ variant = 'default', children, className, ...rest }: Properties) {
   return (
     <span className={cx(styles.tag, styles[`tag--${variant}`], className)} {...rest}>
       {children}

package/src/react/ThemeToggle/index.test.tsx

@@ -4,12 +4,12 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { ThemeToggle } from './index';
 
 function mockMatchMedia(prefersDark: boolean) {
-  Object.defineProperty(window, 'matchMedia', {
+  Object.defineProperty(globalThis, 'matchMedia', {
     writable: true,
     value: vi.fn((query: string) => ({
       matches: query === '(prefers-color-scheme: dark)' ? prefersDark : false,
       media: query,
-      onchange: null,
+      onchange: undefined,
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
       dispatchEvent: vi.fn(),
@@ -81,4 +81,27 @@ describe('ThemeToggle', () => {
     await act(async () => { render(<ThemeToggle />); });
     expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'false');
   });
+
+  it('has aria-label "Switch to dark mode" when in light mode', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Switch to dark mode');
+  });
+
+  it('has aria-label "Switch to light mode" after toggling to dark', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Switch to light mode');
+  });
+
+  it('renders an aria-live polite region', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    const liveRegion = document.querySelector('[aria-live="polite"]');
+    expect(liveRegion).toBeInTheDocument();
+  });
+
+  it('renders an SVG icon with aria-hidden', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    const svg = document.querySelector('svg[aria-hidden="true"]');
+    expect(svg).toBeInTheDocument();
+  });
 });

package/src/react/ThemeToggle/index.tsx

@@ -4,11 +4,52 @@ import type { Theme } from '../../shared/types/theme-toggle';
 import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme';
 import styles from '../../css/theme-toggle.module.css';
 
+const SunIcon = (
+  <svg
+    aria-hidden="true"
+    className={styles['theme-toggle__icon']}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="5" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  </svg>
+);
+
+const MoonIcon = (
+  <svg
+    aria-hidden="true"
+    className={styles['theme-toggle__icon']}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+);
+
 export function ThemeToggle() {
   const [theme, setTheme] = useState<Theme>('light');
 
   useEffect(() => {
     const initial = getInitialTheme();
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setTheme(initial);
     applyTheme(initial);
   }, []);
@@ -21,16 +62,23 @@ export function ThemeToggle() {
   }
 
   const isDark = theme === 'dark';
+  const label = isDark ? 'Dark' : 'Light';
 
   return (
-    <button
-      type="button"
-      className={cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark'])}
-      onClick={toggle}
-      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-      aria-pressed={isDark}
-    >
-      {isDark ? 'Dark' : 'Light'}
-    </button>
+    <span className={styles['theme-toggle__wrapper']}>
+      <button
+        type="button"
+        className={cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark'])}
+        onClick={toggle}
+        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+        aria-pressed={isDark}
+      >
+        {isDark ? MoonIcon : SunIcon}
+        {label}
+      </button>
+      <span aria-live="polite" className={styles['sr-only']}>
+        {label} mode active
+      </span>
+    </span>
   );
 }

package/src/shared/js/theme.ts

@@ -3,20 +3,20 @@ import type { Theme } from '../types/theme-toggle';
 const STORAGE_KEY = 'color-scheme';
 
 export function getInitialTheme(): Theme {
-  if (typeof window === 'undefined') return 'light';
+  if (globalThis.window === undefined) return 'light';
 
   const stored = localStorage.getItem(STORAGE_KEY);
   if (stored === 'light' || stored === 'dark') return stored;
 
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  return globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
 export function applyTheme(theme: Theme): void {
-  if (typeof window === 'undefined') return;
+  if (globalThis.window === undefined) return;
   document.documentElement.setAttribute('color-scheme', theme);
 }
 
 export function persistTheme(theme: Theme): void {
-  if (typeof window === 'undefined') return;
+  if (globalThis.window === undefined) return;
   localStorage.setItem(STORAGE_KEY, theme);
 }

package/src/shared/types/button.ts

@@ -1,7 +1,7 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
 
-export interface ButtonProps {
+export interface ButtonProperties {
   variant?: ButtonVariant;
   size?: ButtonSize;
   disabled?: boolean;

package/src/shared/types/card.ts

@@ -1,5 +1,6 @@
 export type CardElevation = 'flat' | 'raised';
 
-export interface CardProps {
+export interface CardProperties {
   elevation?: CardElevation;
+  role?: string;
 }

package/src/shared/types/tag.ts

@@ -1,5 +1,5 @@
-export type TagVariant = 'default' | 'success' | 'danger';
+export type TagVariant = 'default' | 'success' | 'danger' | 'warning';
 
-export interface TagProps {
+export interface TagProperties {
   variant?: TagVariant;
 }

package/src/shared/types/theme-toggle.ts

@@ -1,5 +1,3 @@
 export type Theme = 'light' | 'dark';
 
-export interface ThemeToggleProps {
-  // No required props — self-contained stateful component
-}
+export type ThemeToggleProperties = Record<never, never>;

package/src/vue/Button/index.vue

@@ -21,7 +21,7 @@ const classes = computed(() =>
 </script>
 
 <template>
-  <button :class="classes" :disabled="disabled">
+  <button :class="classes" :disabled="disabled" :aria-disabled="disabled">
     <slot />
   </button>
 </template>

package/src/vue/ThemeToggle/index.vue

@@ -27,13 +27,56 @@ const classes = () =>
 </script>
 
 <template>
-  <button
-    type="button"
-    :class="classes()"
-    :aria-label="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
-    :aria-pressed="isDark()"
-    @click="toggle"
-  >
-    {{ isDark() ? 'Dark' : 'Light' }}
-  </button>
+  <span :class="styles['theme-toggle__wrapper']">
+    <button
+      type="button"
+      :class="classes()"
+      :aria-label="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+      :aria-pressed="isDark()"
+      @click="toggle"
+    >
+      <!-- Moon icon (dark mode) -->
+      <svg
+        v-if="isDark()"
+        aria-hidden="true"
+        :class="styles['theme-toggle__icon']"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+      <!-- Sun icon (light mode) -->
+      <svg
+        v-else
+        aria-hidden="true"
+        :class="styles['theme-toggle__icon']"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="5" />
+        <line x1="12" y1="1" x2="12" y2="3" />
+        <line x1="12" y1="21" x2="12" y2="23" />
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+        <line x1="1" y1="12" x2="3" y2="12" />
+        <line x1="21" y1="12" x2="23" y2="12" />
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+      </svg>
+      {{ isDark() ? 'Dark' : 'Light' }}
+    </button>
+    <span aria-live="polite" :class="styles['sr-only']">
+      {{ isDark() ? 'Dark' : 'Light' }} mode active
+    </span>
+  </span>
 </template>

package/.releaserc

@@ -1,18 +0,0 @@
-{
-  "plugins": [
-    "@semantic-release/commit-analyzer",
-    "@semantic-release/release-notes-generator",
-    "@semantic-release/changelog",
-    "@anolilab/semantic-release-pnpm",
-    [
-      "@semantic-release/git",
-      {
-        "assets": [
-          "CHANGELOG.md"
-        ]
-      }
-    ],
-    "@semantic-release/github"
-  ],
-  "extends": "semantic-release-monorepo"
-}

package/.turbo/turbo-build.log

@@ -1,7 +0,0 @@
-
-> @dezkareid/components@0.0.0 build /home/runner/work/dezkareid/dezkareid/design-system/components
-> rollup -c rollup.config.mjs
-
-
-src/react/index.ts → dist...
-created dist in 3.3s

package/.turbo/turbo-test.log

@@ -1,17 +0,0 @@
-
-> @dezkareid/components@1.0.0 test /home/runner/work/dezkareid/dezkareid/design-system/components
-> vitest --run
-
-
- RUN  v4.0.18 /home/runner/work/dezkareid/dezkareid/design-system/components
-
- ✓ src/react/Card/index.test.tsx (5 tests) 59ms
- ✓ src/react/Button/index.test.tsx (9 tests) 411ms
- ✓ src/react/ThemeToggle/index.test.tsx (9 tests) 436ms
- ✓ src/react/Tag/index.test.tsx (6 tests) 40ms
-
- Test Files  4 passed (4)
-      Tests  29 passed (29)
-   Start at  17:01:39
-   Duration  2.42s (transform 223ms, setup 342ms, import 1.17s, tests 945ms, environment 2.76s)
-