twintrinsic 0.0.1

package/dist/components/Tree/TreeNode.svelte

@@ -0,0 +1,332 @@
+<!--
+@component
+TreeNode - An individual node within a Tree component.
+Provides consistent styling, accessibility features, and keyboard navigation.
+
+Usage:
+```svelte
+<TreeNode label="Documents">
+  <TreeNode label="Work" />
+  <TreeNode label="Personal" />
+</TreeNode>
+
+<TreeNode 
+  label="Images" 
+  icon="<svg>...</svg>"
+  expanded
+  selected
+  disabled
+>
+  <TreeNode label="Vacation" />
+</TreeNode>
+```
+-->
+<script>
+import { getContext, onMount } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Node key for selection (defaults to id) */
+  key = id,
+
+  /** @type {string} - Node label */
+  label,
+
+  /** @type {string} - Custom icon (HTML or SVG string) */
+  icon,
+
+  /** @type {boolean} - Whether the node is expanded */
+  expanded = false,
+
+  /** @type {boolean} - Whether the node is selected */
+  selected = false,
+
+  /** @type {boolean} - Whether the node is disabled */
+  disabled = false,
+
+  /** @type {boolean} - Whether the node is a leaf (no children) */
+  leaf = false,
+
+  /** @type {number} - Indentation level (managed internally) */
+  level = 0,
+
+  /** @type {Function} - Custom render function for the label */
+  labelRender,
+
+  children,
+
+  ...restProps
+} = $props()
+
+// Get tree context
+const treeContext = getContext("tree")
+
+// Component state
+let isExpanded = $state(expanded)
+let isSelected = $state(selected)
+let hasChildren = $state(false)
+let nodeElement
+
+// Update expanded state when prop changes
+$effect(() => {
+  isExpanded = expanded
+})
+
+// Update selected state from context or prop
+$effect(() => {
+  if (treeContext?.selectable) {
+    isSelected = treeContext.isSelected(key)
+  } else {
+    isSelected = selected
+  }
+})
+
+// Check if node has children
+onMount(() => {
+  hasChildren = !!children && children().length > 0
+
+  return () => {
+    // Cleanup if needed
+  }
+})
+
+// Determine if node is selectable
+const isSelectable = $derived(treeContext?.selectable && !disabled)
+
+// Determine if node should show icons
+const showIcons = $derived(treeContext?.showIcons !== false)
+
+// Determine if tree should show lines
+const showLines = $derived(treeContext?.showLines !== false)
+
+/**
+ * Toggles the expanded state
+ * @param {Event} event - Click event
+ */
+function toggleExpanded(event) {
+  if (disabled || !hasChildren) return
+
+  isExpanded = !isExpanded
+  dispatch("toggle", { expanded: isExpanded, key })
+
+  // Prevent event from triggering selection
+  event.stopPropagation()
+}
+
+/**
+ * Handles click on the node
+ */
+function handleClick() {
+  if (disabled) return
+
+  if (isSelectable) {
+    treeContext.toggleSelection(key)
+    dispatch("select", { selected: isSelected, key })
+  }
+}
+
+/**
+ * Handles keydown events for accessibility
+ * @param {KeyboardEvent} event - Keydown event
+ */
+function handleKeyDown(event) {
+  if (disabled) return
+
+  switch (event.key) {
+    case "Enter":
+    case " ":
+      // Select node
+      if (isSelectable) {
+        treeContext.toggleSelection(key)
+        dispatch("select", { selected: isSelected, key })
+        event.preventDefault()
+      }
+      break
+
+    case "ArrowRight":
+      // Expand node if collapsed
+      if (hasChildren && !isExpanded) {
+        isExpanded = true
+        dispatch("toggle", { expanded: true, key })
+        event.preventDefault()
+      }
+      break
+
+    case "ArrowLeft":
+      // Collapse node if expanded
+      if (hasChildren && isExpanded) {
+        isExpanded = false
+        dispatch("toggle", { expanded: false, key })
+        event.preventDefault()
+      }
+      break
+  }
+}
+</script>
+
+<div
+  {id}
+  class="
+    tree-node
+    {isSelected ? 'tree-node-selected' : ''}
+    {disabled ? 'tree-node-disabled' : ''}
+    {hasChildren ? 'tree-node-parent' : 'tree-node-leaf'}
+    {className}
+  "
+  style="--tree-node-level: {level};"
+  bind:this={nodeElement}
+>
+  <div
+    class="
+      tree-node-content
+      {isSelectable ? 'tree-node-selectable' : ''}
+    "
+    role="treeitem"
+    aria-expanded={hasChildren ? isExpanded : undefined}
+    aria-selected={isSelectable ? isSelected : undefined}
+    aria-disabled={disabled ? true : undefined}
+    tabindex={disabled ? undefined : 0}
+    onclick={handleClick}
+    onkeydown={handleKeyDown}
+  >
+    {#if showLines}
+      <div class="tree-node-lines"></div>
+    {/if}
+    
+    <div class="tree-node-inner">
+      {#if hasChildren}
+        <button
+          type="button"
+          class="tree-node-toggle"
+          aria-label={isExpanded ? 'Collapse' : 'Expand'}
+          onclick={toggleExpanded}
+          tabindex="-1"
+          disabled={disabled}
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path 
+              stroke-linecap="round" 
+              stroke-linejoin="round" 
+              stroke-width="2" 
+              d={isExpanded ? "M19 9l-7 7-7-7" : "M9 5l7 7-7 7"}
+            ></path>
+          </svg>
+        </button>
+      {:else}
+        <div class="tree-node-spacer"></div>
+      {/if}
+      
+      {#if showIcons}
+        <div class="tree-node-icon">
+          {#if icon}
+            {@html icon}
+          {:else if hasChildren}
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+            </svg>
+          {:else}
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+            </svg>
+          {/if}
+        </div>
+      {/if}
+      
+      <div class="tree-node-label">
+        {#if labelRender}
+          {@render labelRender()}
+        {:else}
+          {label}
+        {/if}
+      </div>
+    </div>
+  </div>
+  
+  {#if hasChildren && isExpanded}
+    <div class="tree-node-children" role="group">
+      <svelte:self {...restProps} level={level + 1}>
+        {@render children?.()}
+      </svelte:self>
+    </div>
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .tree-node {
+    @apply w-full;
+  }
+  
+  .tree-node-content {
+    @apply flex items-center;
+    @apply py-1 px-2 rounded-md;
+    @apply text-text dark:text-text;
+    @apply transition-colors duration-150;
+  }
+  
+  .tree-node-selectable {
+    @apply cursor-pointer;
+    @apply hover:bg-hover dark:hover:bg-hover;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400;
+  }
+  
+  .tree-node-selected > .tree-node-content {
+    @apply bg-primary-50 dark:bg-primary-900/20;
+    @apply text-primary-700 dark:text-primary-300;
+  }
+  
+  .tree-node-disabled {
+    @apply opacity-50 cursor-not-allowed;
+    @apply pointer-events-none;
+  }
+  
+  .tree-node-inner {
+    @apply flex items-center;
+    @apply min-w-0;
+  }
+  
+  .tree-node-toggle {
+    @apply flex items-center justify-center;
+    @apply w-5 h-5 mr-1;
+    @apply text-muted dark:text-muted;
+    @apply hover:text-text dark:hover:text-text;
+    @apply rounded-sm;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400;
+    @apply transition-colors duration-150;
+  }
+  
+  .tree-node-spacer {
+    @apply w-5 h-5 mr-1;
+  }
+  
+  .tree-node-icon {
+    @apply flex-shrink-0 mr-2;
+    @apply text-muted dark:text-muted;
+  }
+  
+  .tree-node-label {
+    @apply flex-grow truncate;
+  }
+  
+  .tree-node-children {
+    @apply pl-5;
+  }
+  
+  /* Lines for tree visualization */
+  .tree-node-lines {
+    @apply absolute left-0;
+    @apply border-l border-dashed border-border dark:border-border;
+    @apply h-full;
+    @apply -ml-4;
+  }
+  
+  .tree-with-lines .tree-node-children {
+    @apply relative;
+  }
+</style>

package/dist/components/Tree/TreeNode.svelte.d.ts

@@ -0,0 +1,55 @@
+export default TreeNode;
+type TreeNode = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TreeNode - An individual node within a Tree component.
+ * Provides consistent styling, accessibility features, and keyboard navigation.
+ *
+ * Usage:
+ * ```svelte
+ * <TreeNode label="Documents">
+ * <TreeNode label="Work" />
+ * <TreeNode label="Personal" />
+ * </TreeNode>
+ *
+ * <TreeNode
+ * label="Images"
+ * icon="<svg>...</svg>"
+ * expanded
+ * selected
+ * disabled
+ * >
+ * <TreeNode label="Vacation" />
+ * </TreeNode>
+ * ```
+ */
+declare const TreeNode: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    key?: any;
+    label: any;
+    icon: any;
+    expanded?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    leaf?: boolean;
+    level?: number;
+    labelRender: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    key?: any;
+    label: any;
+    icon: any;
+    expanded?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    leaf?: boolean;
+    level?: number;
+    labelRender: any;
+    children: any;
+} & Record<string, any>;

package/dist/components/icons/TwintrinsicLogo.svelte

@@ -0,0 +1,73 @@
+<!--
+@component
+A modern, dynamic logo for Twintrinsic that represents Tailwind's utility-first approach
+and the intrinsic nature of web design.
+-->
+<script>
+const { class: className = "", size = "3rem" } = $props()
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 180 180"
+  class={className}
+  width={size}
+  height={size}
+  fill="none"
+  stroke="currentColor"
+  aria-label="Twintrinsic Logo"
+>
+<rect
+  style="opacity:0.995712;fill:none;stroke:#5b21b6;stroke-width:8;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+  class="tw-logo-window"
+  width="172"
+  height="172"
+  x="4"
+  y="4" />
+<path
+  style="fill:none;stroke:#5b21b6;stroke-width:6.15013;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+  d="M 0,45 H 180"
+  class="tw-logo-separator" />
+<text
+  xml:space="preserve"
+  style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:105.833px;line-height:1.25;font-family:'OpenDyslexicMono Nerd Font';-inkscape-font-specification:'OpenDyslexicMono Nerd Font, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#5b21b6;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+  x="9.6828251"
+  y="145.79205"
+  class="tw-logo-letters"><tspan
+    style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:105.833px;font-family:'OpenDyslexicMono Nerd Font';-inkscape-font-specification:'OpenDyslexicMono Nerd Font, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#5b21b6;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+    x="9.6828251"
+    y="145.79205">Tw</tspan></text>
+</svg>
+
+<style>
+  @reference '../../twintrinsic.css';
+  svg {
+    @apply transition-colors duration-300;
+  }
+
+  .tw-logo-window, .tw-logo-separator {
+    @apply transition-all duration-500;
+  }
+
+  .tw-logo-letters {
+    @apply transition-transform duration-300 ;
+  }
+
+  /* Optional: Add hover effects */
+  svg:hover .tw-logo-window {
+    @apply stroke-primary-500;
+  }
+
+  svg:hover .tw-logo-letters {
+    @apply stroke-primary-600;
+  }
+
+  /* Dark mode support */
+  :global(.dark) svg:hover .tw-logo-window {
+    @apply stroke-primary-400;
+  }
+
+  :global(.dark) svg:hover .tw-logo-letters {
+    @apply stroke-primary-300;
+  }
+</style>

package/dist/components/icons/TwintrinsicLogo.svelte.d.ts

@@ -0,0 +1,17 @@
+export default TwintrinsicLogo;
+type TwintrinsicLogo = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * A modern, dynamic logo for Twintrinsic that represents Tailwind's utility-first approach
+ * and the intrinsic nature of web design.
+ */
+declare const TwintrinsicLogo: import("svelte").Component<{
+    class?: string;
+    size?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    size?: string;
+};

package/dist/components/icons/twintrinsic-source.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="180mm"
+   height="180mm"
+   viewBox="0 0 180 180"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   sodipodi:docname="twintrinsic.svg"
+   inkscape:export-filename="twintrinsic-source.svg"
+   inkscape:export-xdpi="49.24"
+   inkscape:export-ydpi="49.24"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.72248176"
+     inkscape:cx="337.72479"
+     inkscape:cy="356.41038"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <inkscape:path-effect
+       effect="spiro"
+       id="path-effect2"
+       is_visible="true"
+       lpeversion="1" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:0.995712;fill:none;stroke:#5b21b6;stroke-width:8;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1"
+       width="172"
+       height="172"
+       x="4"
+       y="4" />
+    <path
+       style="fill:none;stroke:#5b21b6;stroke-width:6.15013;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 0,45 180,45"
+       id="path2" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:105.833px;line-height:1.25;font-family:'OpenDyslexicMono Nerd Font';-inkscape-font-specification:'OpenDyslexicMono Nerd Font, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#5b21b6;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+       x="9.6828251"
+       y="145.79205"
+       id="text5"><tspan
+         sodipodi:role="line"
+         id="tspan5"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:105.833px;font-family:'OpenDyslexicMono Nerd Font';-inkscape-font-specification:'OpenDyslexicMono Nerd Font, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#5b21b6;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+         x="9.6828251"
+         y="145.79205">Tw</tspan></text>
+  </g>
+</svg>

package/dist/components/icons/twintrinsic.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="180mm"
+   height="180mm"
+   viewBox="0 0 180 180"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <rect
+       style="opacity:0.995712;fill:none;stroke:#5b21b6;stroke-width:8;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1"
+       width="172"
+       height="172"
+       x="4"
+       y="4" />
+    <path
+       style="fill:none;stroke:#5b21b6;stroke-width:6.15013;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 0,45 H 180"
+       id="path2" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:105.833px;line-height:1.25;font-family:'OpenDyslexicMono Nerd Font';-inkscape-font-specification:'OpenDyslexicMono Nerd Font, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#5b21b6;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+       x="9.6828251"
+       y="145.79205"
+       id="text5"><tspan
+         id="tspan5"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:105.833px;font-family:'OpenDyslexicMono Nerd Font';-inkscape-font-specification:'OpenDyslexicMono Nerd Font, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#5b21b6;fill-opacity:1;stroke:none;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1"
+         x="9.6828251"
+         y="145.79205">Tw</tspan></text>
+  </g>
+</svg>

package/dist/docs/EventsTable.svelte

@@ -0,0 +1,86 @@
+<!--
+@component
+EventsTable - A component for displaying component events documentation.
+
+Usage:
+```svelte
+<EventsTable
+  events={[
+    {
+      name: 'change',
+      type: '{ value: string }',
+      description: 'Fired when value changes'
+    }
+  ]}
+/>
+```
+-->
+<script>
+const {
+  /** @type {Array<{ name: string, type: string, description: string }>} */
+  events = [],
+} = $props()
+</script>
+
+<div class="events-table">
+  <table>
+    <thead>
+      <tr>
+        <th>Event</th>
+        <th>Detail Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each events as event}
+        <tr>
+          <td class="event-name">
+            <code>on{event.name}</code>
+          </td>
+          <td class="event-type">
+            <code>{event.type}</code>
+          </td>
+          <td class="event-description">
+            {event.description}
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  @reference '../twintrinsic.css';
+
+  .events-table {
+    @apply my-4 overflow-x-auto;
+  }
+
+  table {
+    @apply w-full border-collapse;
+  }
+
+  th {
+    @apply px-4 py-2 text-left font-medium bg-surface border-b border-border;
+  }
+
+  td {
+    @apply px-4 py-2 border-b border-border;
+  }
+
+  .event-name {
+    @apply whitespace-nowrap font-medium;
+  }
+
+  .event-type {
+    @apply whitespace-nowrap text-muted;
+  }
+
+  .event-description {
+    @apply text-sm;
+  }
+
+  code {
+    @apply px-1.5 py-0.5 text-xs font-mono rounded bg-surface;
+  }
+</style>

package/dist/docs/EventsTable.svelte.d.ts

@@ -0,0 +1,27 @@
+export default EventsTable;
+type EventsTable = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * EventsTable - A component for displaying component events documentation.
+ *
+ * Usage:
+ * ```svelte
+ * <EventsTable
+ * events={[
+ *   {
+ *     name: 'change',
+ *     type: '{ value: string }',
+ *     description: 'Fired when value changes'
+ *   }
+ * ]}
+ * />
+ * ```
+ */
+declare const EventsTable: import("svelte").Component<{
+    events?: any[];
+}, {}, "">;
+type $$ComponentProps = {
+    events?: any[];
+};