@tessera-ui/core 0.4.0

package/dist/collection/components/container/container.stories.js

@@ -0,0 +1,138 @@
+// Hand-written stories for ts-container
+export default {
+    title: 'Layout/Container',
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg', 'xl', 'full'],
+            description: 'The maximum width of the container.',
+        },
+        padding: {
+            control: 'boolean',
+            description: 'Whether to apply horizontal padding.',
+        },
+    },
+};
+const contentStyle = 'padding: 24px; background: #f1f5f9; border-radius: 8px; font-family: sans-serif;';
+export const Default = () => `
+  <ts-container>
+    <div style="${contentStyle}">
+      <h2 style="margin: 0 0 8px;">Centered Container</h2>
+      <p style="margin: 0; color: #64748b;">This content is centered within a max-width container with responsive padding.</p>
+    </div>
+  </ts-container>
+`;
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">sm (640px)</p>
+      <ts-container size="sm">
+        <div style="${contentStyle}">Small container</div>
+      </ts-container>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">md (768px)</p>
+      <ts-container size="md">
+        <div style="${contentStyle}">Medium container</div>
+      </ts-container>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">lg (1024px)</p>
+      <ts-container size="lg">
+        <div style="${contentStyle}">Large container</div>
+      </ts-container>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">xl (1280px)</p>
+      <ts-container size="xl">
+        <div style="${contentStyle}">Extra large container</div>
+      </ts-container>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">full (100%)</p>
+      <ts-container size="full">
+        <div style="${contentStyle}">Full width container</div>
+      </ts-container>
+    </div>
+  </div>
+`;
+export const NoPadding = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">With padding (default)</p>
+      <ts-container size="md">
+        <div style="${contentStyle}">Padded container</div>
+      </ts-container>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">Without padding</p>
+      <ts-container size="md" padding="false">
+        <div style="${contentStyle}">Flush container - no horizontal padding</div>
+      </ts-container>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <ts-container size="lg">
+    <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
+      <h1 style="margin: 0;">Page Title</h1>
+      <p style="margin: 0; color: #64748b;">A full page layout using container, grid, and buttons.</p>
+      <ts-grid columns="3" gap="4">
+        <div style="padding: 20px; background: #eff6ff; border-radius: 8px;">
+          <h3 style="margin: 0 0 8px;">Feature One</h3>
+          <p style="margin: 0; color: #64748b; font-size: 14px;">Description of the first feature.</p>
+        </div>
+        <div style="padding: 20px; background: #f0fdf4; border-radius: 8px;">
+          <h3 style="margin: 0 0 8px;">Feature Two</h3>
+          <p style="margin: 0; color: #64748b; font-size: 14px;">Description of the second feature.</p>
+        </div>
+        <div style="padding: 20px; background: #fef3c7; border-radius: 8px;">
+          <h3 style="margin: 0 0 8px;">Feature Three</h3>
+          <p style="margin: 0; color: #64748b; font-size: 14px;">Description of the third feature.</p>
+        </div>
+      </ts-grid>
+      <div style="display: flex; gap: 12px;">
+        <ts-button variant="primary">Get Started</ts-button>
+        <ts-button variant="neutral" appearance="outline">Learn More</ts-button>
+      </div>
+    </div>
+  </ts-container>
+`;
+export const DashboardLayout = () => `
+  <ts-container size="xl">
+    <div style="display: flex; gap: 24px; font-family: sans-serif;">
+      <nav style="width: 200px; flex-shrink: 0; padding: 16px; background: #f8fafc; border-radius: 8px;">
+        <h3 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #94a3b8;">Navigation</h3>
+        <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;">
+          <li><a href="#" style="display: block; padding: 8px 12px; border-radius: 6px; background: #e2e8f0; color: #1e293b; text-decoration: none; font-size: 14px;">Dashboard</a></li>
+          <li><a href="#" style="display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;">Analytics</a></li>
+          <li><a href="#" style="display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;">Reports</a></li>
+          <li><a href="#" style="display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;">Settings</a></li>
+        </ul>
+      </nav>
+      <main style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
+        <h2 style="margin: 0;">Dashboard Overview</h2>
+        <ts-grid columns="3" gap="3">
+          <div style="padding: 16px; background: #f1f5f9; border-radius: 8px;">
+            <p style="margin: 0 0 4px; font-size: 13px; color: #94a3b8;">Total Users</p>
+            <p style="margin: 0; font-size: 28px; font-weight: bold;">2,847</p>
+          </div>
+          <div style="padding: 16px; background: #f1f5f9; border-radius: 8px;">
+            <p style="margin: 0 0 4px; font-size: 13px; color: #94a3b8;">Revenue</p>
+            <p style="margin: 0; font-size: 28px; font-weight: bold;">$48.2k</p>
+          </div>
+          <div style="padding: 16px; background: #f1f5f9; border-radius: 8px;">
+            <p style="margin: 0 0 4px; font-size: 13px; color: #94a3b8;">Active Now</p>
+            <p style="margin: 0; font-size: 28px; font-weight: bold;">142</p>
+          </div>
+        </ts-grid>
+        <div style="padding: 24px; background: #f8fafc; border-radius: 8px; min-height: 200px;">
+          <h3 style="margin: 0 0 12px;">Recent Activity</h3>
+          <p style="margin: 0; color: #94a3b8;">Activity feed would go here...</p>
+        </div>
+      </main>
+    </div>
+  </ts-container>
+`;
+//# sourceMappingURL=container.stories.js.map

package/dist/collection/components/container/container.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.stories.js","sourceRoot":"","sources":["../../../src/components/container/container.stories.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC;YACzC,WAAW,EAAE,qCAAqC;SACnD;QACD,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;SACpD;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,kFAAkF,CAAC;AAExG,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;;kBAEnB,YAAY;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;sBAKb,YAAY;;;;;;sBAMZ,YAAY;;;;;;sBAMZ,YAAY;;;;;;sBAMZ,YAAY;;;;;;sBAMZ,YAAY;;;;CAIjC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;sBAKjB,YAAY;;;;;;sBAMZ,YAAY;;;;CAIjC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC5C,CAAC","sourcesContent":["// Hand-written stories for ts-container\n\nexport default {\n  title: 'Layout/Container',\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg', 'xl', 'full'],\n      description: 'The maximum width of the container.',\n    },\n    padding: {\n      control: 'boolean',\n      description: 'Whether to apply horizontal padding.',\n    },\n  },\n};\n\nconst contentStyle = 'padding: 24px; background: #f1f5f9; border-radius: 8px; font-family: sans-serif;';\n\nexport const Default = (): string => `\n  <ts-container>\n    <div style=\"${contentStyle}\">\n      <h2 style=\"margin: 0 0 8px;\">Centered Container</h2>\n      <p style=\"margin: 0; color: #64748b;\">This content is centered within a max-width container with responsive padding.</p>\n    </div>\n  </ts-container>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">sm (640px)</p>\n      <ts-container size=\"sm\">\n        <div style=\"${contentStyle}\">Small container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">md (768px)</p>\n      <ts-container size=\"md\">\n        <div style=\"${contentStyle}\">Medium container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">lg (1024px)</p>\n      <ts-container size=\"lg\">\n        <div style=\"${contentStyle}\">Large container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">xl (1280px)</p>\n      <ts-container size=\"xl\">\n        <div style=\"${contentStyle}\">Extra large container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">full (100%)</p>\n      <ts-container size=\"full\">\n        <div style=\"${contentStyle}\">Full width container</div>\n      </ts-container>\n    </div>\n  </div>\n`;\n\nexport const NoPadding = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">With padding (default)</p>\n      <ts-container size=\"md\">\n        <div style=\"${contentStyle}\">Padded container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">Without padding</p>\n      <ts-container size=\"md\" padding=\"false\">\n        <div style=\"${contentStyle}\">Flush container - no horizontal padding</div>\n      </ts-container>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <ts-container size=\"lg\">\n    <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n      <h1 style=\"margin: 0;\">Page Title</h1>\n      <p style=\"margin: 0; color: #64748b;\">A full page layout using container, grid, and buttons.</p>\n      <ts-grid columns=\"3\" gap=\"4\">\n        <div style=\"padding: 20px; background: #eff6ff; border-radius: 8px;\">\n          <h3 style=\"margin: 0 0 8px;\">Feature One</h3>\n          <p style=\"margin: 0; color: #64748b; font-size: 14px;\">Description of the first feature.</p>\n        </div>\n        <div style=\"padding: 20px; background: #f0fdf4; border-radius: 8px;\">\n          <h3 style=\"margin: 0 0 8px;\">Feature Two</h3>\n          <p style=\"margin: 0; color: #64748b; font-size: 14px;\">Description of the second feature.</p>\n        </div>\n        <div style=\"padding: 20px; background: #fef3c7; border-radius: 8px;\">\n          <h3 style=\"margin: 0 0 8px;\">Feature Three</h3>\n          <p style=\"margin: 0; color: #64748b; font-size: 14px;\">Description of the third feature.</p>\n        </div>\n      </ts-grid>\n      <div style=\"display: flex; gap: 12px;\">\n        <ts-button variant=\"primary\">Get Started</ts-button>\n        <ts-button variant=\"neutral\" appearance=\"outline\">Learn More</ts-button>\n      </div>\n    </div>\n  </ts-container>\n`;\n\nexport const DashboardLayout = (): string => `\n  <ts-container size=\"xl\">\n    <div style=\"display: flex; gap: 24px; font-family: sans-serif;\">\n      <nav style=\"width: 200px; flex-shrink: 0; padding: 16px; background: #f8fafc; border-radius: 8px;\">\n        <h3 style=\"margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #94a3b8;\">Navigation</h3>\n        <ul style=\"list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;\">\n          <li><a href=\"#\" style=\"display: block; padding: 8px 12px; border-radius: 6px; background: #e2e8f0; color: #1e293b; text-decoration: none; font-size: 14px;\">Dashboard</a></li>\n          <li><a href=\"#\" style=\"display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;\">Analytics</a></li>\n          <li><a href=\"#\" style=\"display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;\">Reports</a></li>\n          <li><a href=\"#\" style=\"display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;\">Settings</a></li>\n        </ul>\n      </nav>\n      <main style=\"flex: 1; display: flex; flex-direction: column; gap: 20px;\">\n        <h2 style=\"margin: 0;\">Dashboard Overview</h2>\n        <ts-grid columns=\"3\" gap=\"3\">\n          <div style=\"padding: 16px; background: #f1f5f9; border-radius: 8px;\">\n            <p style=\"margin: 0 0 4px; font-size: 13px; color: #94a3b8;\">Total Users</p>\n            <p style=\"margin: 0; font-size: 28px; font-weight: bold;\">2,847</p>\n          </div>\n          <div style=\"padding: 16px; background: #f1f5f9; border-radius: 8px;\">\n            <p style=\"margin: 0 0 4px; font-size: 13px; color: #94a3b8;\">Revenue</p>\n            <p style=\"margin: 0; font-size: 28px; font-weight: bold;\">$48.2k</p>\n          </div>\n          <div style=\"padding: 16px; background: #f1f5f9; border-radius: 8px;\">\n            <p style=\"margin: 0 0 4px; font-size: 13px; color: #94a3b8;\">Active Now</p>\n            <p style=\"margin: 0; font-size: 28px; font-weight: bold;\">142</p>\n          </div>\n        </ts-grid>\n        <div style=\"padding: 24px; background: #f8fafc; border-radius: 8px; min-height: 200px;\">\n          <h3 style=\"margin: 0 0 12px;\">Recent Activity</h3>\n          <p style=\"margin: 0; color: #94a3b8;\">Activity feed would go here...</p>\n        </div>\n      </main>\n    </div>\n  </ts-container>\n`;\n"]}

package/dist/collection/components/date-picker/date-picker.css

@@ -0,0 +1,233 @@
+/* ==========================================================================
+   ts-date-picker — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-date-picker-bg          Input/calendar background
+     --ts-date-picker-radius      Border radius
+     --ts-date-picker-focus-ring  Focus ring box-shadow
+   ========================================================================== */
+
+:host {
+  display: block;
+  position: relative;
+  font-family: var(--ts-font-family-base);
+
+  --ts-date-picker-bg: var(--ts-color-neutral-50);
+  --ts-date-picker-radius: var(--ts-radius-md);
+  --ts-date-picker-focus-ring: var(--ts-focus-ring);
+}
+
+/* ---- Label ---- */
+.date-picker__label {
+  display: block;
+  margin-block-end: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-medium);
+  color: var(--ts-color-text-primary);
+}
+
+/* ---- Trigger Input ---- */
+.date-picker__trigger {
+  display: block;
+  width: 100%;
+  border: 1px solid var(--ts-color-border-default);
+  border-radius: var(--ts-date-picker-radius);
+  background-color: var(--ts-date-picker-bg);
+  color: var(--ts-color-text-primary);
+  font-family: var(--ts-font-family-base);
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast);
+}
+
+.date-picker__trigger:focus-visible {
+  box-shadow: var(--ts-date-picker-focus-ring);
+  border-color: var(--ts-color-interactive-primary);
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) .date-picker__trigger {
+  padding: var(--ts-spacing-1) var(--ts-spacing-2);
+  font-size: var(--ts-font-size-sm);
+}
+
+:host([size="md"]) .date-picker__trigger {
+  padding: var(--ts-spacing-2) var(--ts-spacing-3);
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="lg"]) .date-picker__trigger {
+  padding: var(--ts-spacing-3) var(--ts-spacing-4);
+  font-size: var(--ts-font-size-lg);
+}
+
+/* ---- Error state ---- */
+:host([error]) .date-picker__trigger {
+  border-color: var(--ts-color-danger-500);
+}
+
+:host([error]) .date-picker__trigger:focus-visible {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
+}
+
+.date-picker__error {
+  display: block;
+  margin-block-start: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-sm);
+  color: var(--ts-color-danger-500);
+}
+
+/* ---- Disabled ---- */
+:host([disabled]) .date-picker__trigger {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Calendar Dropdown ---- */
+.date-picker__calendar {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-start: 0;
+  z-index: var(--ts-z-dropdown, 100);
+  margin-block-start: var(--ts-spacing-1);
+  padding: var(--ts-spacing-3);
+  background-color: var(--ts-color-bg-elevated);
+  border: 1px solid var(--ts-color-border-subtle);
+  border-radius: var(--ts-radius-lg);
+  box-shadow: var(--ts-shadow-lg);
+  min-inline-size: 280px;
+  animation: ts-dp-fade-in 150ms ease-out;
+}
+
+/* ---- Header ---- */
+.date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-block-end: var(--ts-spacing-2);
+}
+
+.date-picker__month-year {
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-primary);
+}
+
+.date-picker__nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: var(--ts-radius-md);
+  background: transparent;
+  color: var(--ts-color-text-secondary);
+  font-size: var(--ts-font-size-lg);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  transition:
+    background-color var(--ts-transition-fast),
+    color var(--ts-transition-fast);
+}
+
+.date-picker__nav-btn:hover {
+  background-color: var(--ts-color-bg-hover);
+  color: var(--ts-color-text-primary);
+}
+
+.date-picker__nav-btn:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+  outline: none;
+}
+
+/* ---- Grid ---- */
+.date-picker__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+  margin-block-end: var(--ts-spacing-1);
+}
+
+.date-picker__weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ts-font-size-xs);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-tertiary);
+  padding: var(--ts-spacing-1) 0;
+}
+
+.date-picker__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+}
+
+/* ---- Day cells ---- */
+.date-picker__day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin: 1px auto;
+  border: none;
+  border-radius: var(--ts-radius-full);
+  background: transparent;
+  color: var(--ts-color-text-primary);
+  font-family: var(--ts-font-family-base);
+  font-size: var(--ts-font-size-sm);
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color var(--ts-transition-fast),
+    color var(--ts-transition-fast);
+}
+
+.date-picker__day--empty {
+  cursor: default;
+}
+
+.date-picker__day:not(.date-picker__day--empty):not(.date-picker__day--disabled):hover {
+  background-color: var(--ts-color-bg-hover);
+}
+
+.date-picker__day:not(.date-picker__day--empty):focus-visible {
+  box-shadow: var(--ts-date-picker-focus-ring);
+  outline: none;
+}
+
+.date-picker__day--today {
+  font-weight: var(--ts-font-weight-bold);
+  border: 1px solid var(--ts-color-interactive-primary);
+}
+
+.date-picker__day--selected {
+  background-color: var(--ts-color-interactive-primary);
+  color: var(--ts-color-text-on-primary);
+  font-weight: var(--ts-font-weight-semi);
+}
+
+.date-picker__day--selected:hover {
+  background-color: var(--ts-color-interactive-primary-hover);
+}
+
+.date-picker__day--disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.date-picker__day--focused {
+  box-shadow: var(--ts-date-picker-focus-ring);
+}
+
+/* ---- Animation ---- */
+@keyframes ts-dp-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}