twintrinsic 0.0.1

package/dist/components/Breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,38 @@
+export default BreadcrumbItem;
+type BreadcrumbItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * BreadcrumbItem - An individual item within a Breadcrumb component.
+ * Renders as a link when href is provided, otherwise as a span for the current page.
+ *
+ * Usage:
+ * ```svelte
+ * <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *
+ * <BreadcrumbItem href="/products" icon="<svg>...</svg>">
+ * Products
+ * </BreadcrumbItem>
+ *
+ * <BreadcrumbItem>Current Page</BreadcrumbItem>
+ * ```
+ */
+declare const BreadcrumbItem: import("svelte").Component<{
+    class?: string;
+    href: any;
+    target: any;
+    icon: any;
+    current?: boolean;
+    collapsible?: boolean;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    href: any;
+    target: any;
+    icon: any;
+    current?: boolean;
+    collapsible?: boolean;
+    children: any;
+};

package/dist/components/Button/Button.svelte

@@ -0,0 +1,252 @@
+<!--
+@component
+Button - A styled button component with various variants and sizes.
+Provides consistent styling, accessibility features, and loading states.
+
+Usage:
+```svelte
+<Button>Default Button</Button>
+
+<Button variant="primary" size="lg">
+  Primary Button
+</Button>
+
+<Button variant="outline" icon="settings">
+  Settings
+</Button>
+
+<Button variant="link" href="/about">
+  About Us
+</Button>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Button type (button, submit, reset) */
+  type = "button",
+
+  /** @type {string} - Button variant (default, primary, secondary, outline, ghost, link) */
+  variant = "default",
+
+  /** @type {string} - Button size (xs, sm, md, lg, xl) */
+  size = "md",
+
+  /** @type {boolean} - Whether the button is disabled */
+  disabled = false,
+
+  /** @type {boolean} - Whether the button is in a loading state */
+  loading = false,
+
+  /** @type {string} - Icon to display (HTML or SVG string) */
+  icon,
+
+  /** @type {string} - Icon position (left or right) */
+  iconPosition = "left",
+
+  /** @type {boolean} - Whether the button is full width */
+  fullWidth = false,
+
+  /** @type {string} - Link URL (renders as <a> instead of <button>) */
+  href,
+
+  /** @type {string} - Link target (_blank, _self, etc.) */
+  target,
+
+  /** @type {string} - ARIA label for accessibility */
+  ariaLabel,
+
+  /** @type {string} - Form ID that this button is associated with */
+  form,
+
+  /** @type {string} - Name attribute for form buttons */
+  name,
+
+  /** @type {string} - Value attribute for form buttons */
+  value,
+
+  /** @type {boolean} - Whether the button should be autofocused */
+  autofocus = false,
+
+  /** @type {string} - Form submission method (post, get, etc.) */
+  formmethod,
+
+  /** @type {string} - Form submission encoding */
+  formenctype,
+
+  /** @type {string} - Form validation mode */
+  formnovalidate,
+
+  /** @type {string} - Form target */
+  formtarget,
+
+  /** @type {string} - Relationship attribute for links */
+  rel,
+
+  /** @type {string} - Download attribute for links */
+  download,
+
+  /** @type {(event: CustomEvent) => void} - Click event handler */
+  onclick,
+
+  children,
+} = $props()
+
+/**
+ * Handles button click
+ * @param {Event} event - Click event
+ */
+function handleClick(event) {
+  if (disabled || loading) {
+    event.preventDefault()
+    return
+  }
+
+  onclick?.(new CustomEvent("click", { detail: event }))
+}
+
+// Determine if button should render as a link
+const isLink = $derived(!!href && !disabled && !loading)
+
+// Determine element type
+const elementType = $derived(isLink ? "a" : "button")
+
+// Determine variant classes
+const variantClasses = $derived(
+  {
+    default:
+      "bg-surface dark:bg-surface text-text dark:text-text border border-border dark:border-border hover:bg-hover dark:hover:bg-hover",
+    primary:
+      "bg-primary-500 dark:bg-primary-500 text-white dark:text-white hover:bg-primary-600 dark:hover:bg-primary-600",
+    secondary:
+      "bg-secondary-500 dark:bg-secondary-500 text-white dark:text-white hover:bg-secondary-600 dark:hover:bg-secondary-600",
+    outline:
+      "bg-transparent dark:bg-transparent text-text dark:text-text border border-border dark:border-border hover:bg-hover dark:hover:bg-hover",
+    ghost:
+      "bg-transparent dark:bg-transparent text-text dark:text-text hover:bg-hover dark:hover:bg-hover",
+    link: "bg-transparent dark:bg-transparent text-primary-500 dark:text-primary-400 hover:underline p-0 h-auto",
+  }[variant] ||
+    "bg-surface dark:bg-surface text-text dark:text-text border border-border dark:border-border hover:bg-hover dark:hover:bg-hover"
+)
+
+// Determine size classes
+const sizeClasses = $derived(
+  variant === "link"
+    ? ""
+    : {
+        xs: "text-xs h-6 px-2",
+        sm: "text-sm h-8 px-3",
+        md: "text-base h-10 px-4",
+        lg: "text-lg h-12 px-5",
+        xl: "text-xl h-14 px-6",
+      }[size] || "text-base h-10 px-4"
+)
+
+// Determine icon size based on button size
+const iconSize = $derived(
+  {
+    xs: "w-3 h-3",
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6",
+    xl: "w-7 h-7",
+  }[size] || "w-5 h-5"
+)
+</script>
+
+<svelte:element
+  this={elementType}
+  {id}
+  class="
+    button
+    {variantClasses}
+    {sizeClasses}
+    {fullWidth ? 'w-full' : ''}
+    {loading ? 'opacity-80 pointer-events-none' : ''}
+    {className}
+  "
+  {type}
+  {href}
+  {target}
+  {disabled}
+  aria-disabled={disabled || loading ? 'true' : undefined}
+  aria-label={ariaLabel}
+  onclick={handleClick}
+  {form}
+  {name}
+  {value}
+  {autofocus}
+  {formmethod}
+  {formenctype}
+  {formnovalidate}
+  {formtarget}
+  {rel}
+  {download}
+>
+  {#if loading}
+    <span class="button-loader {iconSize}" aria-hidden="true"></span>
+    <span class="sr-only">Loading</span>
+  {:else}
+    {#if icon && iconPosition === 'left'}
+      <span class="button-icon button-icon-left {iconSize}" aria-hidden="true">
+        {@html icon}
+      </span>
+    {/if}
+    
+    {#if children}
+      <span class="button-content">
+        {@render children?.()}
+      </span>
+    {/if}
+    
+    {#if icon && iconPosition === 'right'}
+      <span class="button-icon button-icon-right {iconSize}" aria-hidden="true">
+        {@html icon}
+      </span>
+    {/if}
+  {/if}
+</svelte:element>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .button {
+    @apply inline-flex items-center justify-center;
+    @apply font-medium rounded-md;
+    @apply transition-colors duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-2 dark:focus:ring-offset-background;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply whitespace-nowrap;
+  }
+  
+  .button-content {
+    @apply flex-grow;
+  }
+  
+  .button-icon-left {
+    @apply mr-2 -ml-1;
+  }
+  
+  .button-icon-right {
+    @apply ml-2 -mr-1;
+  }
+  
+  .button-loader {
+    @apply rounded-full border-2 border-transparent border-t-current border-r-current;
+    animation: button-spin 0.6s linear infinite;
+  }
+  
+  @keyframes button-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/components/Button/Button.svelte.d.ts

@@ -0,0 +1,80 @@
+export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Button - A styled button component with various variants and sizes.
+ * Provides consistent styling, accessibility features, and loading states.
+ *
+ * Usage:
+ * ```svelte
+ * <Button>Default Button</Button>
+ *
+ * <Button variant="primary" size="lg">
+ * Primary Button
+ * </Button>
+ *
+ * <Button variant="outline" icon="settings">
+ * Settings
+ * </Button>
+ *
+ * <Button variant="link" href="/about">
+ * About Us
+ * </Button>
+ * ```
+ */
+declare const Button: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    type?: string;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon: any;
+    iconPosition?: string;
+    fullWidth?: boolean;
+    href: any;
+    target: any;
+    ariaLabel: any;
+    form: any;
+    name: any;
+    value: any;
+    autofocus?: boolean;
+    formmethod: any;
+    formenctype: any;
+    formnovalidate: any;
+    formtarget: any;
+    rel: any;
+    download: any;
+    onclick: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    type?: string;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon: any;
+    iconPosition?: string;
+    fullWidth?: boolean;
+    href: any;
+    target: any;
+    ariaLabel: any;
+    form: any;
+    name: any;
+    value: any;
+    autofocus?: boolean;
+    formmethod: any;
+    formenctype: any;
+    formnovalidate: any;
+    formtarget: any;
+    rel: any;
+    download: any;
+    onclick: any;
+    children: any;
+};

package/dist/components/Button/ButtonGroup.svelte

@@ -0,0 +1,127 @@
+<!--
+@component
+ButtonGroup - A component for grouping related buttons together.
+Provides consistent styling and spacing for button collections.
+
+Usage:
+```svelte
+<ButtonGroup>
+  <Button>Left</Button>
+  <Button>Middle</Button>
+  <Button>Right</Button>
+</ButtonGroup>
+
+<ButtonGroup variant="outline" size="sm" vertical>
+  <Button>Top</Button>
+  <Button>Middle</Button>
+  <Button>Bottom</Button>
+</ButtonGroup>
+```
+-->
+<script>
+import { setContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Button variant to apply to all children (default, primary, secondary, outline, ghost) */
+  variant,
+
+  /** @type {string} - Button size to apply to all children (xs, sm, md, lg, xl) */
+  size,
+
+  /** @type {boolean} - Whether the buttons should be arranged vertically */
+  vertical = false,
+
+  /** @type {boolean} - Whether the button group should take full width */
+  fullWidth = false,
+
+  /** @type {string} - ARIA label for the button group */
+  ariaLabel,
+
+  children,
+} = $props()
+
+// Provide context for child buttons
+setContext("buttonGroup", {
+  variant,
+  size,
+  inGroup: true,
+})
+</script>
+
+<div
+  {id}
+  class="
+    button-group
+    {vertical ? 'button-group-vertical' : 'button-group-horizontal'}
+    {fullWidth ? 'w-full' : ''}
+    {className}
+  "
+  role="group"
+  aria-label={ariaLabel}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .button-group {
+    @apply inline-flex;
+  }
+  
+  .button-group-horizontal {
+    @apply flex-row;
+  }
+  
+  .button-group-vertical {
+    @apply flex-col;
+  }
+  
+  /* Style child buttons to create connected appearance */
+  .button-group-horizontal :global(.button) {
+    @apply rounded-none;
+  }
+  
+  .button-group-horizontal :global(.button:first-child) {
+    @apply rounded-l-md;
+  }
+  
+  .button-group-horizontal :global(.button:last-child) {
+    @apply rounded-r-md;
+  }
+  
+  .button-group-horizontal :global(.button:not(:first-child)) {
+    @apply -ml-px;
+  }
+  
+  .button-group-vertical :global(.button) {
+    @apply rounded-none;
+  }
+  
+  .button-group-vertical :global(.button:first-child) {
+    @apply rounded-t-md;
+  }
+  
+  .button-group-vertical :global(.button:last-child) {
+    @apply rounded-b-md;
+  }
+  
+  .button-group-vertical :global(.button:not(:first-child)) {
+    @apply -mt-px;
+  }
+  
+  /* Full width styles */
+  .button-group.w-full {
+    @apply w-full;
+  }
+  
+  .button-group.w-full :global(.button) {
+    @apply flex-1;
+  }
+</style>

package/dist/components/Button/ButtonGroup.svelte.d.ts

@@ -0,0 +1,44 @@
+export default ButtonGroup;
+type ButtonGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * ButtonGroup - A component for grouping related buttons together.
+ * Provides consistent styling and spacing for button collections.
+ *
+ * Usage:
+ * ```svelte
+ * <ButtonGroup>
+ * <Button>Left</Button>
+ * <Button>Middle</Button>
+ * <Button>Right</Button>
+ * </ButtonGroup>
+ *
+ * <ButtonGroup variant="outline" size="sm" vertical>
+ * <Button>Top</Button>
+ * <Button>Middle</Button>
+ * <Button>Bottom</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare const ButtonGroup: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    variant: any;
+    size: any;
+    vertical?: boolean;
+    fullWidth?: boolean;
+    ariaLabel: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    variant: any;
+    size: any;
+    vertical?: boolean;
+    fullWidth?: boolean;
+    ariaLabel: any;
+    children: any;
+};

package/dist/components/Card/Card.svelte

@@ -0,0 +1,152 @@
+<!--
+@component
+Card - A container for content with optional header, footer, and media sections.
+Provides a consistent visual style for displaying grouped information.
+
+Usage:
+```svelte
+<Card>
+  <svelte:fragment slot="header">Card Title</svelte:fragment>
+  <p>Card content goes here</p>
+  <svelte:fragment slot="footer">Footer content</svelte:fragment>
+</Card>
+
+<Card
+  href="/some-link"
+  image="/path/to/image.jpg"
+  imageAlt="Description of image"
+>
+  <svelte:fragment slot="header">Linked Card</svelte:fragment>
+  This card is clickable
+</Card>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Link URL if the card is clickable */
+  href,
+
+  /** @type {string} - Image URL for card media */
+  image,
+
+  /** @type {string} - Alt text for the image */
+  imageAlt = "",
+
+  /** @type {boolean} - Whether to show a border */
+  bordered = true,
+
+  /** @type {boolean} - Whether to add a shadow */
+  shadowed = false,
+
+  /** @type {boolean} - Whether to make the card compact (less padding) */
+  compact = false,
+
+  /** @type {boolean} - Whether to add hover effects */
+  hoverable = false,
+
+  children,
+  header,
+  footer,
+} = $props()
+
+// Determine if card has clickable behavior
+const isClickable = !!href
+
+// Determine element type based on href
+const elementType = href ? "a" : "div"
+</script>
+
+<svelte:element
+  this={elementType}
+  {id}
+  class="
+    card
+    {bordered ? 'border border-border dark:border-border' : ''}
+    {shadowed ? 'shadow-md dark:shadow-lg' : ''}
+    {compact ? 'card-compact' : ''}
+    {hoverable || isClickable ? 'card-hoverable' : ''}
+    {className}
+  "
+  {href}
+  tabindex={isClickable ? 0 : undefined}
+>
+  {#if image}
+    <div class="card-media">
+      <img src={image} alt={imageAlt} />
+    </div>
+  {/if}
+  
+  {#if header}
+    <div class="card-header">
+      {@render header()}
+    </div>
+  {/if}
+  
+  <div class="card-body">
+    {@render children?.()}
+  </div>
+  
+  {#if footer}
+    <div class="card-footer">
+      {@render footer()}
+    </div>
+  {/if}
+</svelte:element>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .card {
+    @apply bg-background dark:bg-background text-text dark:text-text rounded-lg overflow-hidden flex flex-col;
+  }
+  
+  .card-media {
+    @apply w-full;
+  }
+  
+  .card-media img {
+    @apply w-full h-auto object-cover;
+  }
+  
+  .card-header {
+    @apply px-6 py-4 border-b border-border dark:border-border font-medium;
+  }
+  
+  .card-body {
+    @apply px-6 py-4 flex-grow;
+  }
+  
+  .card-footer {
+    @apply px-6 py-4 border-t border-border dark:border-border bg-surface dark:bg-surface;
+  }
+  
+  .card-compact .card-header {
+    @apply px-4 py-2;
+  }
+  
+  .card-compact .card-body {
+    @apply px-4 py-2;
+  }
+  
+  .card-compact .card-footer {
+    @apply px-4 py-2;
+  }
+  
+  .card-hoverable {
+    @apply transition-all duration-200;
+    @apply hover:shadow-lg dark:hover:shadow-xl focus:shadow-lg dark:focus:shadow-xl;
+    @apply hover:border-primary-300 dark:hover:border-primary-600 focus:border-primary-300 dark:focus:border-primary-600;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400;
+  }
+  
+  /* Add cursor pointer only for clickable cards */
+  a.card {
+    @apply cursor-pointer;
+  }
+</style>