twintrinsic 0.0.1

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,334 @@
+<!--
+@component
+Modal - A dialog component for displaying content that requires user attention.
+Provides accessible focus management, keyboard navigation, and backdrop interactions.
+
+Usage:
+```svelte
+<Modal open={showModal} onclose={() => showModal = false}>
+  <svelte:fragment slot="header">Modal Title</svelte:fragment>
+  <p>Modal content goes here</p>
+  <svelte:fragment slot="footer">
+    <Button onclick={() => showModal = false}>Close</Button>
+    <Button variant="primary">Save</Button>
+  </svelte:fragment>
+</Modal>
+```
+-->
+<script>
+import { onMount } from "svelte"
+import { fade, scale } from "svelte/transition"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {boolean} - Whether the modal is open */
+  open = false,
+
+  /** @type {boolean} - Whether to close when clicking outside */
+  closeOnOutsideClick = true,
+
+  /** @type {boolean} - Whether to close when pressing Escape */
+  closeOnEscape = true,
+
+  /** @type {string} - Size of the modal (sm, md, lg, xl, full) */
+  size = "md",
+
+  /** @type {boolean} - Whether to center the modal vertically */
+  centered = true,
+
+  /** @type {boolean} - Whether to show a close button in the header */
+  showCloseButton = true,
+
+  /** @type {string} - ARIA label for the close button */
+  closeButtonLabel = "Close modal",
+
+  /** @type {string} - ARIA label for the modal */
+  ariaLabel,
+
+  /** @type {string} - ARIA description for the modal */
+  ariaDescription,
+
+  /** @type {(event: CustomEvent) => void} - Close event handler */
+  onclose,
+
+  children,
+  header,
+  footer,
+} = $props()
+
+// Modal state
+let isOpen = $state(open)
+let modalElement = $state()
+let previouslyFocusedElement = $state()
+
+// Sync open state when prop changes
+$effect(() => {
+  isOpen = open
+
+  if (isOpen) {
+    openModal()
+  } else {
+    closeModal()
+  }
+})
+
+/**
+ * Opens the modal
+ */
+function openModal() {
+  // Save the currently focused element to restore later
+  previouslyFocusedElement = document.activeElement
+
+  // Add body class to prevent scrolling
+  document.body.classList.add("modal-open")
+
+  // Focus the modal after it's visible
+  setTimeout(() => {
+    focusFirstElement()
+  }, 50)
+
+  dispatch("open")
+}
+
+/**
+ * Closes the modal
+ */
+function closeModal() {
+  // Remove body class
+  document.body.classList.remove("modal-open")
+
+  // Restore focus to the previously focused element
+  if (previouslyFocusedElement) {
+    previouslyFocusedElement.focus()
+  }
+
+  onclose?.(new CustomEvent("close"))
+}
+
+/**
+ * Handles backdrop clicks
+ * @param {MouseEvent} event - Click event
+ */
+function handleBackdropClick(event) {
+  // Only close if clicking directly on the backdrop, not on the modal content
+  if (closeOnOutsideClick && event.target === event.currentTarget) {
+    isOpen = false
+    closeModal()
+  }
+}
+
+/**
+ * Handles keydown events
+ * @param {KeyboardEvent} event - Keydown event
+ */
+function handleKeydown(event) {
+  if (!isOpen) return
+
+  // Close on Escape key
+  if (closeOnEscape && event.key === "Escape") {
+    event.preventDefault()
+    isOpen = false
+    closeModal()
+    return
+  }
+
+  // Trap focus within modal
+  if (event.key === "Tab") {
+    trapFocus(event)
+  }
+}
+
+/**
+ * Traps focus within the modal
+ * @param {KeyboardEvent} event - Keydown event
+ */
+function trapFocus(event) {
+  if (!modalElement) return
+
+  // Get all focusable elements
+  const focusableElements = modalElement.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  )
+
+  if (focusableElements.length === 0) return
+
+  const firstElement = focusableElements[0]
+  const lastElement = focusableElements[focusableElements.length - 1]
+
+  // If shift+tab on first element, move to last element
+  if (event.shiftKey && document.activeElement === firstElement) {
+    event.preventDefault()
+    lastElement.focus()
+  }
+  // If tab on last element, move to first element
+  else if (!event.shiftKey && document.activeElement === lastElement) {
+    event.preventDefault()
+    firstElement.focus()
+  }
+}
+
+/**
+ * Focuses the first focusable element in the modal
+ */
+function focusFirstElement() {
+  if (!modalElement) return
+
+  // Try to focus the first focusable element
+  const focusableElement = modalElement.querySelector(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  )
+
+  if (focusableElement) {
+    focusableElement.focus()
+  } else {
+    // If no focusable element, focus the modal itself
+    modalElement.focus()
+  }
+}
+
+// Clean up when component is destroyed
+onMount(() => {
+  if (isOpen) {
+    openModal()
+  }
+
+  return () => {
+    if (isOpen) {
+      document.body.classList.remove("modal-open")
+    }
+  }
+})
+
+// Determine size classes
+const sizeClasses = $derived(
+  {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    "2xl": "max-w-2xl",
+    "3xl": "max-w-3xl",
+    "4xl": "max-w-4xl",
+    "5xl": "max-w-5xl",
+    "6xl": "max-w-6xl",
+    "7xl": "max-w-7xl",
+    full: "max-w-full",
+  }[size] || "max-w-md"
+)
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isOpen}
+  <div
+    class="modal-backdrop"
+    onclick={handleBackdropClick}
+    transition:fade={{ duration: 200 }}
+  >
+    <div
+      {id}
+      class="
+        modal
+        {sizeClasses}
+        {centered ? 'modal-centered' : ''}
+        {className}
+      "
+      role="dialog"
+      aria-modal="true"
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescription ? `${id}-description` : undefined}
+      tabindex="-1"
+      bind:this={modalElement}
+      transition:scale={{ duration: 200, start: 0.95 }}
+    >
+      {#if header}
+        <div class="modal-header">
+          <div class="modal-title">
+            {@render header()}
+          </div>
+          
+          {#if showCloseButton}
+            <button
+              type="button"
+              class="modal-close-button"
+              aria-label={closeButtonLabel}
+              onclick={() => {
+                isOpen = false;
+                closeModal();
+              }}
+            >
+              <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="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+            </button>
+          {/if}
+        </div>
+      {/if}
+      
+      <div class="modal-body" id={ariaDescription ? `${id}-description` : undefined}>
+        {@render children?.()}
+      </div>
+      
+      {#if footer}
+        <div class="modal-footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  /* Add global style to prevent body scrolling when modal is open */
+  :global(body.modal-open) {
+    @apply overflow-hidden;
+  }
+  
+  .modal-backdrop {
+    @apply fixed inset-0 z-50;
+    @apply bg-black/50 dark:bg-black/60 backdrop-blur-sm;
+    @apply flex items-center justify-center p-4;
+  }
+  
+  .modal {
+    @apply w-full relative;
+    @apply bg-background dark:bg-background text-text dark:text-text;
+    @apply rounded-lg shadow-lg overflow-hidden;
+    @apply flex flex-col max-h-[calc(100vh-2rem)];
+  }
+  
+  .modal-centered {
+    @apply my-auto;
+  }
+  
+  .modal-header {
+    @apply flex items-center justify-between p-4 sm:p-6;
+    @apply border-b border-border dark:border-border;
+  }
+  
+  .modal-title {
+    @apply text-lg font-medium;
+  }
+  
+  .modal-close-button {
+    @apply p-1 rounded-md text-muted dark:text-muted;
+    @apply hover:bg-hover dark:hover:bg-hover hover:text-text dark:hover:text-text;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400;
+  }
+  
+  .modal-body {
+    @apply p-4 sm:p-6 overflow-y-auto;
+  }
+  
+  .modal-footer {
+    @apply flex items-center justify-end gap-3 p-4 sm:p-6;
+    @apply border-t border-border dark:border-border;
+  }
+</style>

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

@@ -0,0 +1,55 @@
+export default Modal;
+type Modal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Modal - A dialog component for displaying content that requires user attention.
+ * Provides accessible focus management, keyboard navigation, and backdrop interactions.
+ *
+ * Usage:
+ * ```svelte
+ * <Modal open={showModal} onclose={() => showModal = false}>
+ * <svelte:fragment slot="header">Modal Title</svelte:fragment>
+ * <p>Modal content goes here</p>
+ * <svelte:fragment slot="footer">
+ *   <Button onclick={() => showModal = false}>Close</Button>
+ *   <Button variant="primary">Save</Button>
+ * </svelte:fragment>
+ * </Modal>
+ * ```
+ */
+declare const Modal: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    open?: boolean;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    size?: string;
+    centered?: boolean;
+    showCloseButton?: boolean;
+    closeButtonLabel?: string;
+    ariaLabel: any;
+    ariaDescription: any;
+    onclose: any;
+    children: any;
+    header: any;
+    footer: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    open?: boolean;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    size?: string;
+    centered?: boolean;
+    showCloseButton?: boolean;
+    closeButtonLabel?: string;
+    ariaLabel: any;
+    ariaDescription: any;
+    onclose: any;
+    children: any;
+    header: any;
+    footer: any;
+};

package/dist/components/Panel/Card.svelte

@@ -0,0 +1,141 @@
+<!--
+@component
+Card - A styled container for content with optional header and footer.
+Built on top of the Panel component with additional card-specific styling.
+
+Usage:
+```svelte
+<Card>
+  <svelte:fragment slot="header">Card Title</svelte:fragment>
+  <p>Card content</p>
+  <svelte:fragment slot="footer">Card footer</svelte:fragment>
+</Card>
+
+<Card hoverable>
+  <svelte:fragment slot="media">
+    <img src="image.jpg" alt="Card image" />
+  </svelte:fragment>
+  <h3>Title</h3>
+  <p>Content with hover effect</p>
+</Card>
+```
+-->
+<script>
+import Panel from "./Panel.svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - ARIA label */
+  ariaLabel,
+
+  /** @type {boolean} - Whether to add hover effects */
+  hoverable = false,
+
+  /** @type {boolean} - Whether to add shadow */
+  shadow = true,
+
+  /** @type {"none" | "sm" | "md" | "lg" | "xl"} - Shadow size when shadow is true */
+  shadowSize = "md",
+
+  /** @type {boolean} - Whether the card is clickable */
+  clickable = false,
+
+  children,
+  header,
+  footer,
+  media,
+} = $props()
+
+// Handle click events if card is clickable
+function handleClick(event) {
+  if (clickable) {
+    const customEvent = new CustomEvent("click", {
+      detail: { originalEvent: event },
+      bubbles: true,
+    })
+    this?.dispatchEvent(customEvent)
+  }
+}
+</script>
+
+<div
+  class="
+    card
+    {shadow ? `shadow-${shadowSize}` : ''}
+    {hoverable ? 'card-hoverable' : ''}
+    {clickable ? 'card-clickable' : ''}
+    {className}
+  "
+  {id}
+  role={clickable ? 'button' : 'article'}
+  aria-label={ariaLabel}
+  onclick={handleClick}
+  onkeydown={event => {
+    if (clickable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      handleClick(event);
+    }
+  }}
+  tabindex={clickable ? '0' : undefined}
+>
+  {#if media}
+    <div class="card-media">
+      {@render media?.()}
+    </div>
+  {/if}
+
+  <Panel
+    expanded={true}
+    showIcon={false}
+    bordered={false}
+  >
+    <svelte:fragment slot="header">
+      {@render header?.()}
+    </svelte:fragment>
+
+    {@render children?.()}
+  </Panel>
+
+  {#if footer}
+    <div class="card-footer">
+      {@render footer?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+
+  .card {
+    @apply bg-surface dark:bg-surface rounded-lg overflow-hidden;
+    @apply border border-border dark:border-border;
+  }
+
+  .card-hoverable {
+    @apply transition-all duration-200;
+    @apply hover:shadow-lg hover:-translate-y-1;
+  }
+
+  .card-clickable {
+    @apply cursor-pointer;
+    @apply focus:outline-none focus:ring-2 focus:ring-focus-ring;
+  }
+
+  .card-media {
+    @apply w-full overflow-hidden;
+  }
+
+  .card-media :global(img) {
+    @apply w-full h-full object-cover;
+  }
+
+  .card-footer {
+    @apply px-4 py-3 bg-muted/10 dark:bg-muted/10;
+    @apply border-t border-border dark:border-border;
+  }
+</style>

package/dist/components/Panel/Card.svelte.d.ts

@@ -0,0 +1,52 @@
+export default Card;
+type Card = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Card - A styled container for content with optional header and footer.
+ * Built on top of the Panel component with additional card-specific styling.
+ *
+ * Usage:
+ * ```svelte
+ * <Card>
+ * <svelte:fragment slot="header">Card Title</svelte:fragment>
+ * <p>Card content</p>
+ * <svelte:fragment slot="footer">Card footer</svelte:fragment>
+ * </Card>
+ *
+ * <Card hoverable>
+ * <svelte:fragment slot="media">
+ *   <img src="image.jpg" alt="Card image" />
+ * </svelte:fragment>
+ * <h3>Title</h3>
+ * <p>Content with hover effect</p>
+ * </Card>
+ * ```
+ */
+declare const Card: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    ariaLabel: any;
+    hoverable?: boolean;
+    shadow?: boolean;
+    shadowSize?: string;
+    clickable?: boolean;
+    children: any;
+    header: any;
+    footer: any;
+    media: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    ariaLabel: any;
+    hoverable?: boolean;
+    shadow?: boolean;
+    shadowSize?: string;
+    clickable?: boolean;
+    children: any;
+    header: any;
+    footer: any;
+    media: any;
+};

package/dist/components/Panel/Hero/Hero.story.md

@@ -0,0 +1,9 @@
+---
+group: 'panels'
+icon: 'tabler:section'
+---
+
+# Hero
+
+A Hero, sometimes called a Jumbotron, is an inline panel in a page. It is a visible and logical break in a page, 
+used to showcase a feature or idea.

package/dist/components/Panel/Hero/Hero.story.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+// import type { HstSvelte as Histoire } from '@histoire/plugin-svelte';
+export let Hst
+import Hero from "./Hero.svelte"
+
+let heading = "This is a HERO!"
+let slotContent =
+  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+</script>
+
+<Hst.Story title="Panels/Hero" layout={{ type: 'grid', width: '100%' }} icon="tabler:section">
+	<svelte:fragment slot="controls">
+		<Hst.Text bind:value={heading} title="Heading" />
+		<Hst.Text bind:value={slotContent} title="slotContent" />
+	</svelte:fragment>
+
+	<Hst.Variant title="Default Slot" source="<Hero>&#123;slotContent}</Hero>">
+		<Hero>{slotContent}</Hero>
+	</Hst.Variant>
+
+	<Hst.Variant
+		title="With Heading"
+		source="<Hero heading='This is a HERO'>&#123;slotContent}</Hero>"
+	>
+		<Hero {heading}>
+			{slotContent}
+		</Hero>
+	</Hst.Variant>
+
+	<Hst.Variant title="Success" source="<Hero type='success'>&#123;slotContent}</Hero>">
+		<Hero type="success">{slotContent}</Hero>
+	</Hst.Variant>
+
+	<Hst.Variant title="Info" source="<Hero type='info'>&#123;slotContent}</Hero>">
+		<Hero type="info">{slotContent}</Hero>
+	</Hst.Variant>
+
+	<Hst.Variant title="Warning" source="<Hero type='warning'>&#123;slotContent}</Hero>">
+		<Hero type="warning">{slotContent}</Hero>
+	</Hst.Variant>
+
+	<Hst.Variant title="Failure" source="<Hero type='failure'>&#123;slotContent}</Hero>">
+		<Hero type="failure">{slotContent}</Hero>
+	</Hst.Variant>
+
+	<Hst.Variant title="Danger" source="<Hero type='danger'>&#123;slotContent}</Hero>">
+		<Hero type="danger">{slotContent}</Hero>
+	</Hst.Variant>
+</Hst.Story>

package/dist/components/Panel/Hero/Hero.story.svelte.d.ts

@@ -0,0 +1,21 @@
+import Hero from "./Hero.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Hero: $$__sveltets_2_IsomorphicComponent<{
+    Hst: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Hero = InstanceType<typeof Hero>;
+export default Hero;

package/dist/components/Panel/Hero/Hero.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import Container from "../../Container/Container.svelte"
+let propClasses = ""
+export let heading: string | null = ""
+export let type: TypeLevel = null
+let typeClass = ""
+$: typeClass = type ? `bg-${type}` : "bg-light"
+export { propClasses as class }
+</script>
+
+<Container as="section" {...$$restProps} class="twin-hero {typeClass} {propClasses}  ">
+	<h1 slot="heading">{heading}</h1>
+	<slot></slot>
+</Container>
+
+<style>
+	@reference "../../../twintrinsic.css";
+	:global(.twin-hero) {
+		@apply p-4;
+	}
+	:global(.twin-hero h1) {
+		@apply text-4xl mb-3;
+	}
+</style>