@dezkareid/components 0.0.0 → 1.0.1

package/dist/shared/types/tag.d.ts

@@ -0,0 +1,5 @@
+export type TagVariant = 'default' | 'success' | 'danger';
+export interface TagProps {
+    variant?: TagVariant;
+}
+//# sourceMappingURL=tag.d.ts.map

package/dist/shared/types/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/shared/types/tag.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,QAAQ;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB"}

package/dist/shared/types/theme-toggle.d.ts

@@ -0,0 +1,4 @@
+export type Theme = 'light' | 'dark';
+export interface ThemeToggleProps {
+}
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/shared/types/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/types/theme-toggle.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,gBAAgB;CAEhC"}

package/dist/vue/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Button } from './Button/index.vue';
+export { default as Tag } from './Tag/index.vue';
+export { default as Card } from './Card/index.vue';
+export { default as ThemeToggle } from './ThemeToggle/index.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,7 +1,33 @@
 {
   "name": "@dezkareid/components",
-  "version": "0.0.0",
+  "version": "1.0.1",
+  "type": "module",
   "description": "A package to export UI components in formats like React, Astro, Vue, etc.",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react.js",
+      "default": "./dist/react.js"
+    },
+    "./astro": "./src/astro/index.ts",
+    "./vue": "./src/vue/index.ts",
+    "./css": {
+      "import": "./dist/components.min.css",
+      "default": "./dist/components.min.css"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react/index.d.ts"
+      ]
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/dezkareid/dezkareid"
@@ -15,8 +41,57 @@
     "access": "public"
   },
   "keywords": [
-    "setup",
-    "package",
-    "npm"
-  ]
-}
+    "design-system",
+    "components",
+    "react",
+    "astro",
+    "vue"
+  ],
+  "peerDependencies": {
+    "astro": ">=4.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "classnames": "2.5.1",
+    "@dezkareid/design-tokens": "0.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "29.0.0",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@rollup/plugin-typescript": "12.3.0",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.5.2",
+    "@types/classnames": "^2.3.4",
+    "@types/react": "19.2.9",
+    "@vitejs/plugin-react": "5.1.4",
+    "jsdom": "27.4.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "rollup": "4.56.0",
+    "rollup-plugin-postcss": "4.0.2",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vitest": "4.0.18"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "test": "vitest --run"
+  }
+}

package/src/astro/Button/index.astro

@@ -0,0 +1,35 @@
+---
+import type { ButtonProps } from '../../shared/types/button';
+import styles from '../../css/button.module.css';
+
+type Props = ButtonProps & {
+  href?: string;
+  class?: string;
+  [key: string]: unknown;
+};
+
+const {
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  href,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+
+const classes = [
+  styles.button,
+  styles[`button--${variant}`],
+  styles[`button--${size}`],
+  disabled ? styles['button--disabled'] : '',
+  className ?? '',
+]
+  .filter(Boolean)
+  .join(' ');
+---
+
+<Tag class={classes} href={href} disabled={!href && disabled} {...rest}>
+  <slot />
+</Tag>

package/src/astro/Card/index.astro

@@ -0,0 +1,23 @@
+---
+import type { CardProps } from '../../shared/types/card';
+import styles from '../../css/card.module.css';
+
+type Props = CardProps & {
+  class?: string;
+  [key: string]: unknown;
+};
+
+const { elevation = 'raised', class: className, ...rest } = Astro.props;
+
+const classes = [
+  styles.card,
+  styles[`card--${elevation}`],
+  className ?? '',
+]
+  .filter(Boolean)
+  .join(' ');
+---
+
+<div class={classes} {...rest}>
+  <slot />
+</div>

package/src/astro/Tag/index.astro

@@ -0,0 +1,23 @@
+---
+import type { TagProps } from '../../shared/types/tag';
+import styles from '../../css/tag.module.css';
+
+type Props = TagProps & {
+  class?: string;
+  [key: string]: unknown;
+};
+
+const { variant = 'default', class: className, ...rest } = Astro.props;
+
+const classes = [
+  styles.tag,
+  styles[`tag--${variant}`],
+  className ?? '',
+]
+  .filter(Boolean)
+  .join(' ');
+---
+
+<span class={classes} {...rest}>
+  <slot />
+</span>

package/src/astro/ThemeToggle/index.astro

@@ -0,0 +1,63 @@
+---
+import styles from '../../css/theme-toggle.module.css';
+
+type Props = {
+  class?: string;
+};
+
+const { class: className } = Astro.props;
+
+const classes = [styles['theme-toggle'], className ?? ''].filter(Boolean).join(' ');
+---
+
+<!--
+  The inline script runs before first paint to apply the stored theme,
+  preventing a flash of unstyled/wrong-theme content (FOUC).
+-->
+<script is:inline>
+  (function () {
+    var stored = localStorage.getItem('color-scheme');
+    var theme =
+      stored === 'light' || stored === 'dark'
+        ? stored
+        : window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light';
+    document.documentElement.setAttribute('color-scheme', theme);
+  })();
+</script>
+
+<button
+  type="button"
+  class={classes}
+  data-theme-toggle
+  aria-label="Toggle colour scheme"
+>
+  <span data-theme-label>Light</span>
+</button>
+
+<script>
+  import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme';
+
+  const btn = document.querySelector('[data-theme-toggle]') as HTMLButtonElement | null;
+  const label = document.querySelector('[data-theme-label]') as HTMLElement | null;
+
+  if (btn && label) {
+    let current = getInitialTheme();
+
+    function update(theme: 'light' | 'dark') {
+      label!.textContent = theme === 'dark' ? 'Dark' : 'Light';
+      btn!.setAttribute('aria-pressed', String(theme === 'dark'));
+      btn!.classList.toggle('theme-toggle--dark', theme === 'dark');
+    }
+
+    update(current);
+
+    btn.addEventListener('click', () => {
+      current = current === 'light' ? 'dark' : 'light';
+      applyTheme(current);
+      persistTheme(current);
+      update(current);
+    });
+  }
+</script>

package/src/astro/index.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button/index.astro';
+export { default as Tag } from './Tag/index.astro';
+export { default as Card } from './Card/index.astro';
+export { default as ThemeToggle } from './ThemeToggle/index.astro';

package/src/css/button.module.css

@@ -0,0 +1,90 @@
+/* =============================================================================
+   BUTTON — BEM + OOCSS
+   Structure classes: layout, sizing, spacing
+   Skin classes: colour, border, typography
+   ============================================================================= */
+
+/* --- Structure: block --- */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  border-radius: var(--spacing-4);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-none);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: opacity 0.15s ease;
+}
+
+/* --- Structure: size modifiers --- */
+.button--sm,
+.button--small {
+  padding: var(--spacing-4) var(--spacing-12);
+  font-size: var(--font-size-200);
+}
+
+.button--md,
+.button--medium {
+  padding: var(--spacing-8) var(--spacing-24);
+  font-size: var(--font-size-300);
+}
+
+.button--lg,
+.button--large {
+  padding: var(--spacing-12) var(--spacing-32);
+  font-size: var(--font-size-400);
+}
+
+/* --- Skin: variant modifiers --- */
+.button--primary {
+  background-color: var(--color-primary);
+  color: var(--color-text-inverse);
+  border: 1px solid transparent;
+}
+
+.button--primary:hover:not(.button--disabled) {
+  opacity: 0.88;
+}
+
+.button--secondary,
+.button--outline {
+  background-color: transparent;
+  color: var(--color-primary);
+  border: 1px solid var(--color-primary);
+}
+
+.button--secondary:hover:not(.button--disabled),
+.button--outline:hover:not(.button--disabled) {
+  background-color: var(--color-background-secondary);
+}
+
+.button--success {
+  background-color: var(--color-success);
+  color: var(--color-text-inverse);
+  border: 1px solid transparent;
+}
+
+.button--success:hover:not(.button--disabled) {
+  opacity: 0.88;
+}
+
+.button--ghost {
+  background-color: transparent;
+  color: var(--color-text-primary);
+  border: 1px solid transparent;
+}
+
+.button--ghost:hover:not(.button--disabled) {
+  background-color: var(--color-background-secondary);
+}
+
+/* --- Skin: state modifier --- */
+.button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/src/css/card.module.css

@@ -0,0 +1,30 @@
+/* =============================================================================
+   CARD — BEM + OOCSS
+   Structure classes: layout, sizing, spacing
+   Skin classes: colour, shadow
+   ============================================================================= */
+
+/* --- Structure: block --- */
+.card {
+  display: block;
+  width: 100%;
+  border-radius: var(--spacing-8);
+  padding: var(--spacing-24);
+}
+
+/* --- Skin: base --- */
+.card {
+  background-color: var(--color-background-secondary);
+  color: var(--color-text-primary);
+}
+
+/* --- Skin: elevation modifiers --- */
+
+/* TODO: Propose --shadow-raised token to the design-tokens package. */
+.card--raised {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.card--flat {
+  box-shadow: none;
+}

package/src/css/index.ts

@@ -0,0 +1,4 @@
+import './button.module.css';
+import './card.module.css';
+import './tag.module.css';
+import './theme-toggle.module.css';

package/src/css/tag.module.css

@@ -0,0 +1,33 @@
+/* =============================================================================
+   TAG — BEM + OOCSS
+   Structure classes: layout, sizing, spacing
+   Skin classes: colour, border, typography
+   ============================================================================= */
+
+/* --- Structure: block --- */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-8);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-100);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-none);
+}
+
+/* --- Skin: variant modifiers --- */
+.tag--default {
+  background-color: var(--color-background-secondary);
+  color: var(--color-text-primary);
+}
+
+.tag--success {
+  background-color: var(--color-success);
+  color: var(--color-text-inverse);
+}
+
+.tag--danger {
+  background-color: var(--color-danger);
+  color: var(--color-text-inverse);
+}

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

@@ -0,0 +1,38 @@
+/* =============================================================================
+   THEME TOGGLE — BEM + OOCSS
+   Structure classes: layout, sizing, spacing
+   Skin classes: colour, state
+   ============================================================================= */
+
+/* --- Structure: block --- */
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+  cursor: pointer;
+  padding: var(--spacing-8) var(--spacing-12);
+  border: none;
+  border-radius: var(--spacing-4);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-200);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-none);
+}
+
+/* --- Skin: base --- */
+.theme-toggle {
+  background-color: transparent;
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-background-secondary);
+}
+
+.theme-toggle:hover {
+  background-color: var(--color-background-secondary);
+}
+
+/* --- Skin: state modifier (dark mode active) --- */
+.theme-toggle--dark {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}

package/src/declarations.d.ts

@@ -0,0 +1,19 @@
+// CSS Modules
+declare module '*.module.css' {
+  const classes: Record<string, string>;
+  export default classes;
+}
+
+// Astro components
+declare module '*.astro' {
+  import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
+  const Component: AstroComponentFactory;
+  export default Component;
+}
+
+// Vue SFCs
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const Component: DefineComponent;
+  export default Component;
+}

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

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Button } from './index';
+
+describe('Button', () => {
+  it('renders with default variant and size', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('renders primary variant', () => {
+    render(<Button variant="primary">Primary</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.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/);
+  });
+
+  it('renders sm size', () => {
+    render(<Button size="sm">Small</Button>);
+    expect(screen.getByRole('button').className).toMatch(/button--sm/);
+  });
+
+  it('renders md size', () => {
+    render(<Button size="md">Medium</Button>);
+    expect(screen.getByRole('button').className).toMatch(/button--md/);
+  });
+
+  it('renders lg size', () => {
+    render(<Button size="lg">Large</Button>);
+    expect(screen.getByRole('button').className).toMatch(/button--lg/);
+  });
+
+  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/);
+  });
+
+  it('does not fire onClick when disabled', async () => {
+    const onClick = vi.fn();
+    render(<Button disabled onClick={onClick}>Disabled</Button>);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('fires onClick when enabled', async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/react/Button/index.tsx

@@ -0,0 +1,31 @@
+import type { ButtonHTMLAttributes } from 'react';
+import cx from 'classnames';
+import type { ButtonProps } from '../../shared/types/button';
+import styles from '../../css/button.module.css';
+
+type Props = ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  children,
+  className,
+  ...rest
+}: Props) {
+  return (
+    <button
+      className={cx(
+        styles.button,
+        styles[`button--${variant}`],
+        styles[`button--${size}`],
+        disabled && styles['button--disabled'],
+        className,
+      )}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Card } from './index';
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(<Card>Card content</Card>);
+    expect(screen.getByText('Card content')).toBeInTheDocument();
+  });
+
+  it('renders arbitrary children', () => {
+    render(
+      <Card>
+        <h2>Title</h2>
+        <p>Body</p>
+      </Card>
+    );
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Body')).toBeInTheDocument();
+  });
+
+  it('applies raised elevation by default', () => {
+    const { container } = render(<Card>Content</Card>);
+    expect((container.firstChild as HTMLElement).className).toMatch(/card--raised/);
+  });
+
+  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/);
+  });
+
+  it('applies raised elevation when explicitly set', () => {
+    const { container } = render(<Card elevation="raised">Content</Card>);
+    expect((container.firstChild as HTMLElement).className).toMatch(/card--raised/);
+  });
+});

package/src/react/Card/index.tsx

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