@semantic-components/ui 0.57.0 → 0.62.0

package/README.md

@@ -1 +1,15 @@
 # @semantic-components/ui
+
+Core UI primitives, utilities, and styles for the Semantic Components library.
+
+## Contents
+
+- **Components**: Button, Link
+- **Utils**: `cn()` utility (Tailwind class merging via `clsx` + `tailwind-merge`)
+- **Styles**: Base theme (shadcn/ui tokens, Tailwind setup, CDK overlay)
+
+## Usage
+
+```ts
+import { ScButton, ScLink, cn } from '@semantic-components/ui';
+```

package/eslint.config.mjs

@@ -0,0 +1,48 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}'],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: await import('jsonc-eslint-parser'),
+    },
+  },
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'sc',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'sc',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/ui",
+  "assets": ["./src/lib/styles"],
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,45 +1,27 @@
 {
   "name": "@semantic-components/ui",
-  "version": "0.57.0",
+  "version": "0.62.0",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "author": "Khalil LAGRIDA",
   "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/cdk": ">=19.0.0",
-    "@angular/forms": ">=19.0.0",
-    "class-variance-authority": "^0.7.1",
-    "rxjs": "~7.8.1",
-    "@semantic-icons/lucide-icons": ">=0.0.1",
-    "@semantic-components/utils": "0.46.0",
-    "@angular/router": ">=19.0.0",
-    "@js-temporal/polyfill": ">=0.4.4"
-  },
-  "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "https://github.com/khalilou88/semantic-components",
+    "url": "https://github.com/gridatek/semantic-components",
     "directory": "libs/ui"
   },
+  "peerDependencies": {
+    "@angular/core": ">=21.1.0",
+    "class-variance-authority": ">=0.7.1",
+    "clsx": ">=2.1.1",
+    "tailwind-merge": ">=3.4.0"
+  },
   "exports": {
-    "./styles.css": {
-      "style": "./styles.css"
-    },
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/semantic-components-ui.mjs"
+    "./styles": {
+      "default": "./src/lib/styles/index.css"
     }
   },
-  "module": "fesm2022/semantic-components-ui.mjs",
-  "typings": "index.d.ts",
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,28 @@
+{
+  "name": "ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/src",
+  "prefix": "sc",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:ng-packagr-lite",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "libs/ui/ng-package.json",
+        "tsConfig": "libs/ui/tsconfig.lib.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/ui/tsconfig.lib.prod.json"
+        },
+        "development": {}
+      },
+      "defaultConfiguration": "production"
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/components';
+export * from './lib/utils';

package/src/lib/components/button/README.md

@@ -0,0 +1,143 @@
+# Button
+
+Displays a button or a component that looks like a button.
+
+## Usage
+
+```html
+<button sc-button>Click me</button>
+```
+
+## Directive
+
+### ScButton
+
+Button directive that can be applied to `button` or `a` elements.
+
+**Selector:** `button[sc-button], a[sc-button]`
+
+**Inputs:**
+
+| Input      | Type                              | Default     | Description                                                  |
+| ---------- | --------------------------------- | ----------- | ------------------------------------------------------------ |
+| `variant`  | `ButtonVariant`                   | `'default'` | Visual style variant                                         |
+| `size`     | `ButtonSize`                      | `'default'` | Size of the button                                           |
+| `type`     | `'button' \| 'submit' \| 'reset'` | `'button'`  | Button type attribute (only applied to `<button>` elements)  |
+| `href`     | `string`                          | `'#'`       | Href attribute (only applied to `<a>` elements, overridable) |
+| `disabled` | `boolean`                         | `false`     | Disables the button (sets `aria-disabled`)                   |
+| `class`    | `string`                          | `''`        | Additional CSS classes                                       |
+
+**ButtonVariant:**
+
+- `default` - Primary button style
+- `destructive` - Destructive/danger action
+- `outline` - Bordered button
+- `secondary` - Secondary action
+- `ghost` - Minimal styling
+- `link` - Looks like a link
+
+**ButtonSize:**
+
+- `default` - Standard size (h-8)
+- `xs` - Extra small size (h-6)
+- `sm` - Small size (h-7)
+- `lg` - Large size (h-9)
+- `icon` - Square icon button (size-8)
+- `icon-xs` - Extra small icon button (size-6)
+- `icon-sm` - Small icon button (size-7)
+- `icon-lg` - Large icon button (size-9)
+
+## Examples
+
+### Variants
+
+```html
+<button sc-button>Default</button>
+<button sc-button variant="secondary">Secondary</button>
+<button sc-button variant="destructive">Destructive</button>
+<button sc-button variant="outline">Outline</button>
+<button sc-button variant="ghost">Ghost</button>
+<button sc-button variant="link">Link</button>
+```
+
+### Sizes
+
+```html
+<button sc-button size="lg">Large</button>
+<button sc-button size="default">Default</button>
+<button sc-button size="sm">Small</button>
+<button sc-button size="icon">
+  <svg><!-- icon --></svg>
+</button>
+```
+
+### With Icons
+
+```html
+<button sc-button>
+  <svg><!-- icon --></svg>
+  Upload
+</button>
+
+<button sc-button variant="outline">
+  Settings
+  <svg><!-- icon --></svg>
+</button>
+```
+
+### Disabled
+
+```html
+<button sc-button disabled>Disabled</button>
+```
+
+### As Link
+
+`ScButton` automatically sets `href="#"` on `<a>` elements. Override with `[href]` for real navigation:
+
+```html
+<!-- Default href="#" -->
+<a sc-button>Link Button</a>
+<a sc-button variant="outline">Outline Link</a>
+
+<!-- Custom href -->
+<a sc-button href="/somewhere">Navigate</a>
+```
+
+### Form Submit
+
+By default, `sc-button` sets `type="button"` to prevent accidental form submissions. Use `type="submit"` explicitly for submit buttons:
+
+```html
+<form>
+  <button sc-button variant="outline">Cancel</button>
+  <!-- type="button" by default, won't submit -->
+
+  <button sc-button type="submit">Save</button>
+  <!-- explicit type="submit" -->
+</form>
+```
+
+### Loading State
+
+```html
+<button sc-button disabled>
+  <svg sc-spinner si-loader-2-icon></svg>
+  Please wait
+</button>
+```
+
+## Features
+
+- **Multiple Variants**: 6 visual variants for different use cases
+- **Size Options**: 4 sizes including icon-only
+- **Icon Support**: Automatic sizing for nested SVG icons
+- **Link Support**: Works on both `button` and `a` elements
+- **Disabled State**: Built-in disabled styling
+
+## Accessibility
+
+- Uses native `button` or `a` elements
+- Supports native `disabled` attribute
+- Focus ring for keyboard navigation
+- Proper contrast ratios for all variants

package/src/lib/components/button/button.ts

@@ -0,0 +1,69 @@
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../utils';
+
+export const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ScButtonVariants = VariantProps<typeof buttonVariants>;
+
+@Directive({
+  selector: 'button[sc-button]',
+  host: {
+    'data-slot': 'button',
+    '[attr.type]': 'type()',
+    '[disabled]': 'disabled()',
+    '[attr.aria-disabled]': 'disabled() || null',
+    '[class]': 'class()',
+  },
+})
+export class ScButton {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly variant = input<ScButtonVariants['variant']>('default');
+  readonly size = input<ScButtonVariants['size']>('default');
+  readonly type = input<'button' | 'submit' | 'reset'>('button');
+  readonly disabled = input<boolean, unknown>(false, {
+    transform: booleanAttribute,
+  });
+
+  protected readonly class = computed(() =>
+    cn(
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button';

package/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './link';

package/src/lib/components/link/index.ts

@@ -0,0 +1 @@
+export * from './link';

package/src/lib/components/link/link.ts

@@ -0,0 +1,31 @@
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import { buttonVariants, type ScButtonVariants } from '../button';
+
+@Directive({
+  selector: 'a[sc-link]',
+  host: {
+    'data-slot': 'link',
+    '[attr.href]': '!disabled() ? href() : null',
+    '[attr.role]': 'disabled() ? "link" : null',
+    '[attr.aria-disabled]': 'disabled() || null',
+    '[attr.tabindex]': 'disabled() ? -1 : null',
+    '[class]': 'class()',
+  },
+})
+export class ScLink {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly variant = input<ScButtonVariants['variant']>('default');
+  readonly size = input<ScButtonVariants['size']>('default');
+  readonly href = input<string>('#');
+  readonly disabled = input<boolean, unknown>(false, {
+    transform: booleanAttribute,
+  });
+
+  protected readonly class = computed(() =>
+    cn(
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/styles/index.css

@@ -0,0 +1,3 @@
+@import url('@angular/cdk/overlay-prebuilt.css');
+
+@import './shadcn.css';

package/{styles.css → src/lib/styles/shadcn.css}

@@ -1,17 +1,9 @@
-@import url('@angular/cdk/overlay-prebuilt.css');
-
 @import 'tailwindcss';
-
-@plugin '@tailwindcss/typography';
-
 @import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
-@import './tiptap-styles.css';
-
 :root {
-  --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -27,7 +19,7 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -36,6 +28,7 @@
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -49,23 +42,23 @@
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.145 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.269 0 0);
+  --popover: oklch(0.145 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
+  --primary: oklch(0.985 0 0);
   --primary-foreground: oklch(0.205 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
+  --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -77,15 +70,11 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -110,6 +99,10 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -118,65 +111,14 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-
-  @keyframes progress {
-    0% {
-      transform: translateX(0) scaleX(0);
-    }
-    40% {
-      transform: translateX(0) scaleX(0.4);
-    }
-    100% {
-      transform: translateX(100%) scaleX(0.5);
-    }
-  }
-
-  --animate-progress: progress 1s infinite linear;
-
-  @keyframes accordion-down {
-    0% {
-      height: 0;
-    }
-    100% {
-      height: height;
-    }
-  }
-
-  @keyframes accordion-up {
-    0% {
-      height: height;
-    }
-    100% {
-      height: 0;
-    }
-  }
-
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    interpolate-size: allow-keywords;
   }
   body {
     @apply bg-background text-foreground;
   }
 }
-
-html {
-  interpolate-size: allow-keywords;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-pre.shiki {
-  @apply p-6 rounded-md overflow-auto border border-border;
-}
-
-.cdk-overlay-dark-backdrop {
-  @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50;
-}

package/src/lib/utils/index.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "emitDecoratorMetadata": false,
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Khalil LAGRIDA
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.