@ismail-elkorchi/ui-primitives 0.1.0

package/README.md

@@ -0,0 +1,63 @@
+# @ismail-elkorchi/ui-primitives
+
+Shadow DOM web components backed by the shared token CSS variables from `@ismail-elkorchi/ui-tokens`. They ship no Tailwind and assume tokens are loaded on `:root`.
+
+## Build & distribution
+
+- `npm run build` emits ESM + `.d.ts` files into `dist/`.
+- Exported subpaths map directly to files: `dist/index.js`, `dist/register.js`, `dist/Button.js`, `dist/Badge.js`, `dist/Input.js`, `dist/Separator.js`.
+- Published artifacts include only `dist/` and this README; TypeScript sources stay in the workspace.
+
+## Usage
+
+```ts
+import '@ismail-elkorchi/ui-primitives/register'; // defines all elements
+// or import individual components for tree-shaking:
+import '@ismail-elkorchi/ui-primitives/button';
+import '@ismail-elkorchi/ui-primitives/badge';
+import '@ismail-elkorchi/ui-primitives/input';
+import '@ismail-elkorchi/ui-primitives/separator';
+```
+
+Ensure your app imports tokens before Tailwind so the theme variables exist:
+
+```css
+@import '@ismail-elkorchi/ui-tokens/index.css';
+@import 'tailwindcss';
+```
+
+## Parts (consistent strategy)
+
+- `uik-button`: `part="base"` on the internal `<button>`.
+- `uik-badge`: `part="base"` on the internal `<div>`.
+- `uik-input`: `part="base"` on the internal `<input>`.
+- `uik-separator`: `part="base"` on the internal `<div>` line.
+
+## Components and contracts
+
+### `<uik-button>`
+
+- **Attributes/props**: `variant` (`default | destructive | outline | secondary | ghost | link`), `size` (`default | sm | lg | icon`), `type` (`button | submit | reset` - defaults to `button`), `active` (boolean), `muted` (boolean), `disabled` (boolean).
+- **Events**: native button events (`click`, focus/blur) bubble from the internal button; disabled buttons swallow click.
+- **Styling hooks**:
+  - Sizing is enforced on the `:host`. The internal button fills the host (100% width/height).
+  - `active`/`muted` props control stateful colors (especially for ghost variant).
+  - `part="base"` allows overrides, but avoid fighting the host sizing.
+
+### `<uik-badge>`
+
+- **Attributes/props**: `variant` (`default | secondary | destructive | outline`).
+- **Events**: none special; behaves like an inline element.
+- **Styling hooks**: token-driven colors and `part="base"`.
+
+### `<uik-input>` (event strategy)
+
+- **Attributes/props**: `type`, `placeholder`, `value`, `disabled`, `label` (required for a11y, sets `aria-label`).
+- **Events**: re-dispatches `input` and `change` as `CustomEvent`s with `detail: { value, originalEvent }`, `bubbles: true`, `composed: true`. The internal native event is stopped to avoid duplicate handlers; listen on the custom element for `input`/`change`.
+- **Styling hooks**: token-driven colors, `part="base"`. The `value` property stays in sync with user input.
+
+### `<uik-separator>`
+
+- **Attributes/props**: `orientation` (`horizontal | vertical`).
+- **Events**: none; presentational.
+- **Styling hooks**: token-driven color, `part="base"`.

package/dist/Badge.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+export declare class Badge extends LitElement {
+    accessor variant: 'default' | 'secondary' | 'destructive' | 'outline';
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=Badge.d.ts.map

package/dist/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../Badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,qBACa,KAAM,SAAQ,UAAU;IACT,QAAQ,CAAC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,CAAa;IAE5G,OAAgB,MAAM,0BAwCpB;IAEO,MAAM;CAOhB"}

package/dist/Badge.js

@@ -0,0 +1,69 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let Badge = class Badge extends LitElement {
+    #variant_accessor_storage = 'default';
+    get variant() { return this.#variant_accessor_storage; }
+    set variant(value) { this.#variant_accessor_storage = value; }
+    static styles = css `
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 0.375rem;
+      border: 1px solid transparent;
+      padding: 0.125rem 0.625rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      transition:
+        color 0.15s,
+        background-color 0.15s;
+    }
+
+    .variant-default {
+      background-color: hsl(var(--primary, 0 0% 98%));
+      color: hsl(var(--primary-foreground, 240 5.9% 10%));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    .variant-secondary {
+      background-color: hsl(var(--secondary, 240 3.7% 15.9%));
+      color: hsl(var(--secondary-foreground, 0 0% 98%));
+    }
+
+    .variant-destructive {
+      background-color: hsl(var(--destructive, 0 62.8% 30.6%));
+      color: hsl(var(--destructive-foreground, 0 0% 98%));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    .variant-outline {
+      background-color: transparent;
+      border-color: hsl(var(--border, 240 3.7% 15.9%));
+      color: hsl(var(--foreground, 0 0% 98%));
+    }
+  `;
+    render() {
+        return html `
+      <div part="base" class="badge variant-${this.variant}">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], Badge.prototype, "variant", null);
+Badge = __decorate([
+    customElement('uik-badge')
+], Badge);
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAGnD,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IACA,4BAA+D,SAAS,CAAC;IAAzE,IAAA,OAAO,6CAAkE;IAAzE,IAAA,OAAO,mDAAkE;IAE5G,MAAM,CAAU,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwC3B,CAAC;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;8CAC+B,IAAI,CAAC,OAAO;;;KAGrD,CAAC;IACJ,CAAC;;AAlDkC;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCAAmF;AADjG,KAAK;IADjB,aAAa,CAAC,WAAW,CAAC;GACd,KAAK,CAoDjB"}

package/dist/Button.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class Button extends LitElement {
+    accessor variant: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    accessor size: 'default' | 'sm' | 'lg' | 'icon';
+    accessor type: 'button' | 'submit' | 'reset';
+    accessor disabled: boolean;
+    accessor active: boolean;
+    accessor muted: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,qBACa,MAAO,SAAQ,UAAU;IACK,QAAQ,CAAC,OAAO,EACrD,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAa;IACkB,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAa;IAC3E,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IACvD,QAAQ,CAAC,QAAQ,UAAS;IACX,QAAQ,CAAC,MAAM,UAAS;IACxB,QAAQ,CAAC,KAAK,UAAS;IAEjE,OAAgB,MAAM,0BAwIpB;IAEO,MAAM;CAiBhB"}

package/dist/Button.js

@@ -0,0 +1,205 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let Button = class Button extends LitElement {
+    #variant_accessor_storage = 'default';
+    get variant() { return this.#variant_accessor_storage; }
+    set variant(value) { this.#variant_accessor_storage = value; }
+    #size_accessor_storage = 'default';
+    get size() { return this.#size_accessor_storage; }
+    set size(value) { this.#size_accessor_storage = value; }
+    #type_accessor_storage = 'button';
+    get type() { return this.#type_accessor_storage; }
+    set type(value) { this.#type_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #active_accessor_storage = false;
+    get active() { return this.#active_accessor_storage; }
+    set active(value) { this.#active_accessor_storage = value; }
+    #muted_accessor_storage = false;
+    get muted() { return this.#muted_accessor_storage; }
+    set muted(value) { this.#muted_accessor_storage = value; }
+    static styles = css `
+    :host {
+      display: inline-flex;
+    }
+
+    /* Size variants on host */
+    :host([size='default']) {
+      height: 2.25rem;
+    }
+    :host([size='sm']) {
+      height: 2rem;
+    }
+    :host([size='lg']) {
+      height: 2.5rem;
+    }
+    :host([size='icon']) {
+      height: 2.25rem;
+      width: 2.25rem;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      gap: 0.5rem;
+      white-space: nowrap;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      transition:
+        color 0.15s,
+        background-color 0.15s;
+      cursor: pointer;
+      border: none;
+      padding: 0;
+    }
+
+    /* Padding applied to internal button based on size prop of host (mirrored via class or just explicit here) 
+       Actually, to keep it simple, we can use the classes on the button as before for padding, 
+       but height/width are now 100% to fill host. 
+    */
+    .size-default {
+      padding: 0.5rem 1rem;
+    }
+    .size-sm {
+      padding: 0.25rem 0.75rem;
+      font-size: 0.75rem;
+    }
+    .size-lg {
+      padding: 0.5rem 2rem;
+    }
+    .size-icon {
+      padding: 0;
+    }
+
+    button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 1px hsl(var(--ring, 240 4.9% 83.9%));
+    }
+
+    button:disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /* Color variants using CSS variables */
+    .variant-default {
+      background-color: hsl(var(--primary, 0 0% 98%));
+      color: hsl(var(--primary-foreground, 240 5.9% 10%));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+    .variant-default:hover {
+      background-color: hsl(var(--primary, 0 0% 98%) / 0.9);
+    }
+
+    .variant-destructive {
+      background-color: hsl(var(--destructive, 0 62.8% 30.6%));
+      color: hsl(var(--destructive-foreground, 0 0% 98%));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+    .variant-destructive:hover {
+      background-color: hsl(var(--destructive, 0 62.8% 30.6%) / 0.9);
+    }
+
+    .variant-outline {
+      background-color: transparent;
+      border: 1px solid hsl(var(--border, 240 3.7% 15.9%));
+      color: hsl(var(--foreground, 0 0% 98%));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+    .variant-outline:hover {
+      background-color: hsl(var(--accent, 240 3.7% 15.9%));
+      color: hsl(var(--accent-foreground, 0 0% 98%));
+    }
+
+    .variant-secondary {
+      background-color: hsl(var(--secondary, 240 3.7% 15.9%));
+      color: hsl(var(--secondary-foreground, 0 0% 98%));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+    .variant-secondary:hover {
+      background-color: hsl(var(--secondary, 240 3.7% 15.9%) / 0.8);
+    }
+
+    .variant-ghost {
+      background-color: transparent;
+      color: hsl(var(--foreground, 0 0% 98%));
+    }
+    .variant-ghost:hover {
+      background-color: hsl(var(--accent, 240 3.7% 15.9%));
+      color: hsl(var(--accent-foreground, 0 0% 98%));
+    }
+
+    /* Active/Muted States for Ghost (and others if needed) */
+    :host([muted]) .variant-ghost {
+      color: hsl(var(--muted-foreground, 240 5% 64.9%));
+    }
+    :host([muted]) .variant-ghost:hover {
+      color: hsl(var(--foreground, 0 0% 98%));
+    }
+
+    :host([active]) .variant-ghost {
+      background-color: hsl(var(--accent, 240 3.7% 15.9%));
+      color: hsl(var(--accent-foreground, 0 0% 98%));
+    }
+
+    .variant-link {
+      background-color: transparent;
+      color: hsl(var(--primary, 0 0% 98%));
+      text-decoration-offset: 4px;
+    }
+    .variant-link:hover {
+      text-decoration: underline;
+    }
+  `;
+    render() {
+        return html `
+      <button
+        part="base"
+        class="variant-${this.variant} size-${this.size}"
+        type="${this.type}"
+        ?disabled=${this.disabled}
+        @click=${(e) => {
+            if (this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }}>
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "variant", null);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "size", null);
+__decorate([
+    property({ type: String })
+], Button.prototype, "type", null);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "active", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "muted", null);
+Button = __decorate([
+    customElement('uik-button')
+], Button);
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../Button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAGnD,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IACc,4BAMrC,SAAS,CAAC;IAN2B,IAAA,OAAO,6CAMlC;IAN2B,IAAA,OAAO,mDAMlC;IAC2B,yBAAyC,SAAS,CAAC;IAAnD,IAAA,IAAI,0CAA+C;IAAnD,IAAA,IAAI,gDAA+C;IAClE,yBAAsC,QAAQ,CAAC;IAA/C,IAAA,IAAI,0CAA2C;IAA/C,IAAA,IAAI,gDAA2C;IAC9C,6BAAW,KAAK,CAAC;IAAjB,IAAA,QAAQ,8CAAS;IAAjB,IAAA,QAAQ,oDAAS;IACF,2BAAS,KAAK,CAAC;IAAf,IAAA,MAAM,4CAAS;IAAf,IAAA,MAAM,kDAAS;IACf,0BAAQ,KAAK,CAAC;IAAd,IAAA,KAAK,2CAAS;IAAd,IAAA,KAAK,iDAAS;IAEjE,MAAM,CAAU,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwI3B,CAAC;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;;;yBAGU,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI;gBACvC,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;iBAChB,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;;;KAGJ,CAAC;IACJ,CAAC;;AAvKiD;IAAjD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAMjB;AAC2B;IAAjD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;kCAA6D;AAClE;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kCAAyD;AAC9C;IAAnC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAA2B;AACF;IAAlD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oCAAyB;AACf;IAAlD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mCAAwB;AAZtD,MAAM;IADlB,aAAa,CAAC,YAAY,CAAC;GACf,MAAM,CAyKlB"}

package/dist/Input.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export declare class Input extends LitElement {
+    accessor type: string;
+    accessor placeholder: string;
+    accessor value: string;
+    accessor disabled: boolean;
+    accessor label: string;
+    static styles: import("lit").CSSResult;
+    private emitValue;
+    private onChange;
+    private onInput;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=Input.d.ts.map

package/dist/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../Input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,qBACa,KAAM,SAAQ,UAAU;IACT,QAAQ,CAAC,IAAI,SAAU;IACvB,QAAQ,CAAC,WAAW,SAAM;IAC1B,QAAQ,CAAC,KAAK,SAAM;IACnB,QAAQ,CAAC,QAAQ,UAAS;IAC3B,QAAQ,CAAC,KAAK,SAAM;IAE9C,OAAgB,MAAM,0BAoCpB;IAEF,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,QAAQ,CAKd;IAEF,OAAO,CAAC,OAAO,CAKb;IAEO,MAAM;CAahB"}

package/dist/Input.js

@@ -0,0 +1,110 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let Input = class Input extends LitElement {
+    #type_accessor_storage = 'text';
+    get type() { return this.#type_accessor_storage; }
+    set type(value) { this.#type_accessor_storage = value; }
+    #placeholder_accessor_storage = '';
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #value_accessor_storage = '';
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #label_accessor_storage = '';
+    get label() { return this.#label_accessor_storage; }
+    set label(value) { this.#label_accessor_storage = value; }
+    static styles = css `
+    :host {
+      display: block;
+      flex: 1;
+      min-width: 0;
+    }
+
+    input {
+      display: flex;
+      height: 2.25rem;
+      width: 100%;
+      border-radius: 0.375rem;
+      border: 1px solid hsl(var(--input, 240 3.7% 15.9%));
+      background-color: transparent;
+      padding: 0.25rem 0.75rem;
+      font-size: 0.875rem;
+      color: hsl(var(--foreground, 0 0% 98%));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      transition:
+        border-color 0.15s,
+        box-shadow 0.15s;
+    }
+
+    input::placeholder {
+      color: hsl(var(--muted-foreground, 240 5% 64.9%));
+    }
+
+    input:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 1px hsl(var(--ring, 240 4.9% 83.9%));
+    }
+
+    input:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `;
+    emitValue(name, originalEvent) {
+        this.dispatchEvent(new CustomEvent(name, { detail: { value: this.value, originalEvent }, bubbles: true, composed: true }));
+    }
+    onChange = (e) => {
+        const input = e.target;
+        this.value = input.value;
+        e.stopPropagation();
+        this.emitValue('change', e);
+    };
+    onInput = (e) => {
+        const input = e.target;
+        this.value = input.value;
+        e.stopPropagation();
+        this.emitValue('input', e);
+    };
+    render() {
+        return html `
+      <input
+        part="base"
+        type="${this.type}"
+        aria-label="${this.label}"
+        placeholder="${this.placeholder}"
+        .value="${this.value}"
+        ?disabled=${this.disabled}
+        @change=${this.onChange}
+        @input=${this.onInput} />
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], Input.prototype, "type", null);
+__decorate([
+    property({ type: String })
+], Input.prototype, "placeholder", null);
+__decorate([
+    property({ type: String })
+], Input.prototype, "value", null);
+__decorate([
+    property({ type: Boolean })
+], Input.prototype, "disabled", null);
+__decorate([
+    property({ type: String })
+], Input.prototype, "label", null);
+Input = __decorate([
+    customElement('uik-input')
+], Input);
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../Input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAKnD,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IACA,yBAAO,MAAM,CAAC;IAAd,IAAA,IAAI,0CAAU;IAAd,IAAA,IAAI,gDAAU;IACd,gCAAc,EAAE,CAAC;IAAjB,IAAA,WAAW,iDAAM;IAAjB,IAAA,WAAW,uDAAM;IACjB,0BAAQ,EAAE,CAAC;IAAX,IAAA,KAAK,2CAAM;IAAX,IAAA,KAAK,iDAAM;IACV,6BAAW,KAAK,CAAC;IAAjB,IAAA,QAAQ,8CAAS;IAAjB,IAAA,QAAQ,oDAAS;IAClB,0BAAQ,EAAE,CAAC;IAAX,IAAA,KAAK,2CAAM;IAAX,IAAA,KAAK,iDAAM;IAE9C,MAAM,CAAU,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoC3B,CAAC;IAEM,SAAS,CAAC,IAAoB,EAAE,aAAoB;QAC1D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACnG,CAAC;IACJ,CAAC;IAEO,QAAQ,GAAG,CAAC,CAAQ,EAAE,EAAE;QAC9B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEM,OAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;QAC7B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;sBACH,IAAI,CAAC,KAAK;uBACT,IAAI,CAAC,WAAW;kBACrB,IAAI,CAAC,KAAK;oBACR,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;KACxB,CAAC;IACJ,CAAC;;AA5EkC;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iCAAwB;AACd;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCAA2B;AACjB;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kCAAqB;AACV;IAAnC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;qCAA2B;AAClB;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kCAAqB;AALnC,KAAK;IADjB,aAAa,CAAC,WAAW,CAAC;GACd,KAAK,CA8EjB"}

package/dist/Separator.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+export declare class Separator extends LitElement {
+    accessor orientation: 'horizontal' | 'vertical';
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=Separator.d.ts.map

package/dist/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../Separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,qBACa,SAAU,SAAQ,UAAU;IACb,QAAQ,CAAC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEzF,OAAgB,MAAM,0BAmBpB;IAEO,MAAM;CAIhB"}

package/dist/Separator.js

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let Separator = class Separator extends LitElement {
+    #orientation_accessor_storage = 'horizontal';
+    get orientation() { return this.#orientation_accessor_storage; }
+    set orientation(value) { this.#orientation_accessor_storage = value; }
+    static styles = css `
+    :host {
+      display: block;
+      flex-shrink: 0;
+    }
+
+    .separator {
+      background-color: hsl(var(--border, 240 3.7% 15.9%));
+    }
+
+    .horizontal {
+      height: 1px;
+      width: 100%;
+    }
+
+    .vertical {
+      height: 100%;
+      width: 1px;
+    }
+  `;
+    render() {
+        const isHorizontal = this.orientation === 'horizontal';
+        return html ` <div part="base" class="separator ${isHorizontal ? 'horizontal' : 'vertical'}" role="none"></div> `;
+    }
+};
+__decorate([
+    property({ type: String })
+], Separator.prototype, "orientation", null);
+Separator = __decorate([
+    customElement('uik-separator')
+], Separator);
+export { Separator };
+//# sourceMappingURL=Separator.js.map

package/dist/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../Separator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAGnD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IACJ,gCAAyC,YAAY,CAAC;IAAtD,IAAA,WAAW,iDAA2C;IAAtD,IAAA,WAAW,uDAA2C;IAEzF,MAAM,CAAU,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmB3B,CAAC;IAEO,MAAM;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC;QACvD,OAAO,IAAI,CAAA,sCAAsC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,uBAAuB,CAAC;IACnH,CAAC;;AA1BkC;IAAlC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CAAgE;AAD9E,SAAS;IADrB,aAAa,CAAC,eAAe,CAAC;GAClB,SAAS,CA4BrB"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Badge';
+export * from './Input';
+export * from './Separator';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Badge';
+export * from './Input';
+export * from './Separator';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/register.d.ts

@@ -0,0 +1,5 @@
+import './Button';
+import './Badge';
+import './Input';
+import './Separator';
+//# sourceMappingURL=register.d.ts.map

package/dist/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../register.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,SAAS,CAAC;AACjB,OAAO,SAAS,CAAC;AACjB,OAAO,aAAa,CAAC"}

package/dist/register.js

@@ -0,0 +1,5 @@
+import './Button';
+import './Badge';
+import './Input';
+import './Separator';
+//# sourceMappingURL=register.js.map

package/dist/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../register.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,SAAS,CAAC;AACjB,OAAO,SAAS,CAAC;AACjB,OAAO,aAAa,CAAC"}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@ismail-elkorchi/ui-primitives",
+  "version": "0.1.0",
+  "description": "Shadow DOM UI primitives built with Lit and driven by shared tokens.",
+  "author": "Ismail El Korchi",
+  "license": "Apache-2.0",
+  "type": "module",
+  "keywords": ["lit", "web-components", "ui", "shadow-dom", "primitives"],
+  "engines": {"node": ">=20.11"},
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./index": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "import": "./dist/register.js",
+      "default": "./dist/register.js"
+    },
+    "./button": {
+      "types": "./dist/Button.d.ts",
+      "import": "./dist/Button.js",
+      "default": "./dist/Button.js"
+    },
+    "./badge": {
+      "types": "./dist/Badge.d.ts",
+      "import": "./dist/Badge.js",
+      "default": "./dist/Badge.js"
+    },
+    "./input": {
+      "types": "./dist/Input.d.ts",
+      "import": "./dist/Input.js",
+      "default": "./dist/Input.js"
+    },
+    "./separator": {
+      "types": "./dist/Separator.d.ts",
+      "import": "./dist/Separator.js",
+      "default": "./dist/Separator.js"
+    }
+  },
+  "sideEffects": [
+    "./dist/**/*.js"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "npm run clean && tsc -p tsconfig.build.json",
+    "clean": "node -e \"const fs = require('fs'); fs.rmSync('dist', {recursive: true, force: true}); fs.rmSync('.tsbuildinfo', {force: true});\"",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "prepack": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ismail-elkorchi/ui-kit.git",
+    "directory": "packages/ui-primitives"
+  },
+  "bugs": {
+    "url": "https://github.com/Ismail-elkorchi/ui-kit/issues"
+  },
+  "homepage": "https://github.com/Ismail-elkorchi/ui-kit",
+  "dependencies": {
+    "lit": "^3.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}