twintrinsic 0.0.1

package/README.md

@@ -0,0 +1,150 @@
+# Twintrinsic
+A tailwind-based collection of svelte components.
+
+# WTF is Twintrinsic?
+I got this idea during the christmas break of 2022 when I was looking for a new UI library that was flexible enough to allow me to extend it in ways I wanted and had good accessibility support. After combing through a bunch, I got the idea to try to create a small lib that was basically extensions of HTML. Since HTML elements already have basic accessibility built-in, it's a no-brainer to use these instead of fancy custom elements. I also wanted to use Tailwind for its themeability and easy customization. HTML in intrinsic to the web and tailwind is an extension, so i got `tailwind + intrinsic = twintrinsic`.
+
+# Performance
+I am not going to worry about performance for now. I am going to use available HTML and CSS as much as possible, without using Javascript for interactivity unless absolutely necessary. This should keep the compiled bundle pretty performant. My main focus is going to be on code readability, accessibility, and extensibility.
+
+## Components:
+This is in order of heirarchy.
+- [ ] Container
+  - [ ] Panel (collapsible content and header)
+    - [ ] Sidebar (attaches to side of parent)
+    - [ ] BottomBar
+    - [ ] Accordion
+    - [ ] Card
+    - [ ] Lazy (content loads when card is visible)
+    - [ ] 
+  - [ ] AppHeader
+  - [ ] App
+    - [ ] `split` is IDE-style (resizable panels)
+- [ ] Separator (visual HR/VR with text, icon, etc)
+- [ ]Form
+  - [ ] General (all inputs)
+    - [ ] Input Validation
+    - [ ] floating labels (optional)
+    - [ ] compact view ("input group" with icons on left/right)
+    - [ ] Placeholder
+    - [ ] input masking (formatting display)
+  - [ ] AutoComplete
+  - [ ] Calendar
+  - [ ] Checkbox
+    - [ ] configurable states / icons
+  - [ ] ListInput (multiple value with "chips")
+  - [ ] ColorPicker
+  - [ ] Dropdown 
+    - [ ] Cascading Menu
+    - [ ] Multiple selection
+    - [ ] icons
+  - [ ] FloatLabel
+  - [ ] NumberInput
+    - [ ] unit display (with masking)
+    - [ ] vertical 
+  - [ ] InputSwitch
+  - [ ] InputText
+  - [ ] InvalidState
+  - [ ] Knob (circle progress "slider")
+  - [ ] Listbox
+  - [ ] MultiSelect
+  - [ ] Password
+  - [ ] RadioButton
+  - [ ] Rating
+  - [ ] SelectButton
+  - [ ] Slider
+  - [ ] Textarea
+  - [ ] ToggleButton
+  - [ ] TreeSelect
+  - [ ] Validation on all inputs
+  - [ ] 
+- [ ] Advanced
+  - [ ] Editor
+  - [ ] Terminal
+
+- [ ]General
+  - [ ] Localization
+  - [ ] Theming
+    - [ ] Colors
+  - [ ] Specifying Iconsets
+- [ ] Button
+  - [ ] Button
+  - [ ] Speed Dial
+  - [ ] SplitButton
+- [ ] Data
+  - [ ] DataTable
+  - [ ] DataView
+  - [ ] VirtualScroller
+  - [ ] FilterService
+  - [ ] FullCalendar
+  - [ ] OrderList
+  - [ ] OrganizationChart
+  - [ ] Paginator
+  - [ ] PickList
+  - [ ] Timeline
+  - [ ] Tree
+  - [ ] TreeTable
+- [ ] Panel
+  - [ ] Accordion
+  - [ ] Card
+  - [ ] Deferred
+  - [ ] Divider
+  - [ ] Fieldset
+  - [ ] Panel
+  - [ ] Splitter
+  - [ ] ScrollPanel
+  - [ ] TabView
+  - [ ] Toolbar
+- [ ] Overlay
+  - [ ] ConfirmDialog
+  - [ ] ConfirmPopup
+  - [ ] Dialog
+  - [ ] DynamicDialog
+  - [ ] OverlayPanel
+  - [ ] Sidebar
+  - [ ] Tooltip
+- [ ] File
+  - [ ] Upload
+- [ ] Menu
+  - [ ] MenuModel
+  - [ ] BreadCrumb
+  - [ ] ContextMenu
+  - [ ] MegaMenu
+  - [ ] Menu
+  - [ ] Menubar
+  - [ ] PanelMenu
+  - [ ] Steps
+  - [ ] TabMenu
+  - [ ] TieredMenu
+  - [ ] Dock
+- [ ] Chart
+  - [ ] ChartModel
+  - [ ] Pie
+  - [ ] Doughnut
+  - [ ] Bar
+  - [ ] Line
+  - [ ] PolarArea
+  - [ ] Radar
+  - [ ] Combo
+- [ ] Messages
+  - [ ] Message
+  - [ ] Toast
+  - [ ] Media
+  - [ ] Carousel
+  - [ ] Galleria
+  - [ ] Image
+- [ ] Misc
+  - [ ] Avatar
+  - [ ] Badge
+  - [ ] BlockUI
+  - [ ] Chip
+  - [ ] FocusTrap
+  - [ ] Inplace
+  - [ ] ProgressBar
+  - [ ] ProgressSpinner
+  - [ ] Ripple
+  - [ ] ScrollTop
+  - [ ] Skeleton
+  - [ ] StyleClass
+  - [ ] Tag
+  - [ ] Terminal

package/dist/App/App.svelte

@@ -0,0 +1,54 @@
+<script>
+import { onDestroy, setContext } from "svelte"
+export let darkMode = false
+
+setContext("appDarkMode", {
+  getDarkMode: () => darkMode,
+})
+export let appName = "Twintrinsic App"
+export let leftPanelWidth = "300px"
+export let rightPanelWidth = "300px"
+</script>
+
+<svelte:head>
+  <title>{appName}</title>
+</svelte:head>
+<!-- <svelte:body class="{darkMode ? "dark" : "light"}"/> -->
+<div class='app bg-element-100 dark:bg-dark dark:text-light min-h-screen' style="--left-panel-width: {leftPanelWidth}; --right-panel-width: {rightPanelWidth};">
+  {#if $$slots.menu}
+    <div class="appMenu">
+      <slot name="menu"/>
+    </div>
+  {/if}
+  {#if $$slots.header}
+    <div class="appHeader">
+      <slot name="header"/>
+    </div>
+  {/if}
+  <div class="appWrapper w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 grow">
+    {#if $$slots.leftPanel}
+      <div class="appLeftPanel w-fixed w-full shrink grow-0 px-4">
+          <div class="sticky top-0 p-4 w-full h-full">
+              <slot name="leftPanel"/>
+          </div>
+      </div>
+    {/if}
+    <main class="appMain w-full grow pt-1 px-3">
+      <slot/>
+    </main>
+    {#if $$slots.rightPanel}
+      <div class="appRightPanel w-fixed w-full shrink grow-0 px-2">
+          <!-- fixed-width -->
+          <div class="flex sm:flex-col px-2">
+            <slot name="rightPanel"/>
+          </div>
+      </div>
+    {/if}
+  </div>
+  {#if $$slots.footer}
+    <footer class="bg-black mt-auto">
+      <slot name="footer"/>
+    </footer>
+  {/if}
+</div>
+

package/dist/App/App.svelte.d.ts

@@ -0,0 +1,65 @@
+export default App;
+type App = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    darkMode?: boolean | undefined;
+    appName?: string | undefined;
+    leftPanelWidth?: string | undefined;
+    rightPanelWidth?: string | undefined;
+}, {
+    menu: {};
+    header: {};
+    leftPanel: {};
+    default: {};
+    rightPanel: {};
+    footer: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    menu: {};
+    header: {};
+    leftPanel: {};
+    default: {};
+    rightPanel: {};
+    footer: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const App: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    darkMode?: boolean | undefined;
+    appName?: string | undefined;
+    leftPanelWidth?: string | undefined;
+    rightPanelWidth?: string | undefined;
+}, {
+    menu: {};
+    header: {};
+    leftPanel: {};
+    default: {};
+    rightPanel: {};
+    footer: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    menu: {};
+    header: {};
+    leftPanel: {};
+    default: {};
+    rightPanel: {};
+    footer: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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;
+}

package/dist/Section.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+const {
+  heading = "",
+  class: propClasses = "",
+  type = null,
+} = $props<{ heading?: string; class?: string; type?: string | null }>()
+
+const typeCSS = $derived(type ? `bg-${type}` : "")
+</script>
+
+<style>
+  @reference "./twintrinsic.css";
+.twin-section {
+  @apply m-2 my-4;
+}
+</style>
+
+<section class="twin-section {propClasses} {typeCSS}">
+  {#if $$slots.heading}
+  <slot name="heading">
+    <h2>{heading}</h2>
+  </slot>
+  {/if}
+  <slot></slot>
+</section>

package/dist/Section.svelte.d.ts

@@ -0,0 +1,34 @@
+type $$ComponentProps = {
+    heading?: string;
+    class?: string;
+    type?: string | null;
+};
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Section: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<$$ComponentProps, {
+    heading: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    heading: {};
+    default: {};
+}, {}, "">;
+type Section = InstanceType<typeof Section>;
+export default Section;

package/dist/actions/clickOutside.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Action that triggers a callback when clicking outside of an element
+ * @param node - The element to watch for outside clicks
+ * @param callback - Function to call when clicking outside
+ * @returns Action object with destroy method
+ */
+export declare function clickOutside(node: HTMLElement, callback: () => void): {
+    destroy(): void;
+};

package/dist/actions/clickOutside.js

@@ -0,0 +1,19 @@
+/**
+ * Action that triggers a callback when clicking outside of an element
+ * @param node - The element to watch for outside clicks
+ * @param callback - Function to call when clicking outside
+ * @returns Action object with destroy method
+ */
+export function clickOutside(node, callback) {
+    function handleClick(event) {
+        if (node && !node.contains(event.target) && event.target instanceof Node) {
+            callback();
+        }
+    }
+    document.addEventListener("click", handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener("click", handleClick, true);
+        },
+    };
+}

package/dist/actions/index.d.ts

@@ -0,0 +1 @@
+export { clickOutside } from "./clickOutside";

package/dist/actions/index.js

@@ -0,0 +1 @@
+export { clickOutside } from "./clickOutside";

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,75 @@
+<!--
+@component
+Accordion - A group of collapsible panels using native HTML details/summary elements.
+By default, only one panel can be open at a time using the native `name` attribute.
+
+Usage:
+```svelte
+<Accordion>
+  <AccordionItem>
+    <svelte:fragment slot="header">Section 1</svelte:fragment>
+    Content for section 1
+  </AccordionItem>
+  <AccordionItem>
+    <svelte:fragment slot="header">Section 2</svelte:fragment>
+    Content for section 2
+  </AccordionItem>
+</Accordion>
+```
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { setContext } from "svelte";
+
+  interface Props {
+    /** Additional CSS classes */
+    class?: string;
+    /** HTML id for accessibility */
+    id?: string;
+    /** Whether to allow multiple panels to be open simultaneously */
+    allowMultiple?: boolean;
+    /** Index of the initially expanded item (null for all collapsed) */
+    defaultExpanded?: number | null;
+    /** Whether to add a border around the accordion */
+    bordered?: boolean;
+    /** Change event handler */
+    onchange?: (event: CustomEvent<{ expandedItems: number[] }>) => void;
+    children?: Snippet;
+  }
+
+  let {
+    class: className = "",
+    id = crypto.randomUUID(),
+    allowMultiple = false,
+    defaultExpanded = 0,
+    bordered = true,
+    onchange,
+    children,
+  }: Props = $props();
+
+  const groupName = crypto.randomUUID();
+
+  const accordionContext = $derived({
+    groupName,
+    allowMultiple,
+    defaultExpanded,
+    onchange,
+  });
+
+  setContext("accordion", accordionContext);
+</script>
+
+<div 
+  class="accordion {bordered ? 'border border-border dark:border-border rounded-lg' : ''} {className}"
+  id={id}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .accordion {
+    @apply divide-y divide-border dark:divide-border overflow-hidden;
+  }
+</style>

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

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Additional CSS classes */
+    class?: string;
+    /** HTML id for accessibility */
+    id?: string;
+    /** Whether to allow multiple panels to be open simultaneously */
+    allowMultiple?: boolean;
+    /** Index of the initially expanded item (null for all collapsed) */
+    defaultExpanded?: number | null;
+    /** Whether to add a border around the accordion */
+    bordered?: boolean;
+    /** Change event handler */
+    onchange?: (event: CustomEvent<{
+        expandedItems: number[];
+    }>) => void;
+    children?: Snippet;
+}
+/**
+ * Accordion - A group of collapsible panels using native HTML details/summary elements.
+ * By default, only one panel can be open at a time using the native `name` attribute.
+ *
+ * Usage:
+ * ```svelte
+ * <Accordion>
+ * <AccordionItem>
+ *   <svelte:fragment slot="header">Section 1</svelte:fragment>
+ *   Content for section 1
+ * </AccordionItem>
+ * <AccordionItem>
+ *   <svelte:fragment slot="header">Section 2</svelte:fragment>
+ *   Content for section 2
+ * </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Accordion/AccordionItem.svelte

@@ -0,0 +1,150 @@
+<!--
+@component
+AccordionItem - Individual item within an Accordion component.
+Uses native HTML details/summary elements for semantic disclosure.
+
+Usage:
+```svelte
+<AccordionItem>
+  <svelte:fragment slot="header">Section Title</svelte:fragment>
+  Content goes here
+</AccordionItem>
+```
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { getContext, onMount } from "svelte";
+
+  interface AccordionContext {
+    groupName: string;
+    allowMultiple: boolean;
+    defaultExpanded: number | null;
+    onchange?: (event: CustomEvent<{ expandedItems: number[] }>) => void;
+  }
+
+  interface Props {
+    /** Additional CSS classes */
+    class?: string;
+    /** HTML id for accessibility */
+    id?: string;
+    /** ARIA label for the header */
+    ariaLabel?: string;
+    /** Whether to disable the item controls */
+    disabled?: boolean;
+    /** Whether to show the expand/collapse icon */
+    showIcon?: boolean;
+    children?: Snippet;
+    header?: Snippet;
+  }
+
+  let {
+    class: className = "",
+    id = crypto.randomUUID(),
+    ariaLabel,
+    disabled = false,
+    showIcon = true,
+    children,
+    header,
+  }: Props = $props();
+
+  const accordion = getContext<AccordionContext | undefined>("accordion");
+
+  let index = $state(-1);
+  let detailsElement: HTMLDetailsElement | undefined = $state();
+
+  onMount(() => {
+    const parent = detailsElement?.parentElement;
+    if (parent) {
+      const items = Array.from(parent.children);
+      index = items.indexOf(detailsElement!);
+    }
+  });
+
+  const shouldBeOpen = $derived(
+    accordion?.defaultExpanded === index && accordion?.defaultExpanded !== null
+  );
+
+  function handleToggle(event: Event): void {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+
+    const target = event.target as HTMLDetailsElement;
+    accordion?.onchange?.(
+      new CustomEvent("change", {
+        detail: { expandedItems: [index] },
+      })
+    );
+  }
+</script>
+
+<details
+  class="accordion-item {className}"
+  class:disabled
+  bind:this={detailsElement}
+  {id}
+  name={accordion?.allowMultiple ? undefined : accordion?.groupName}
+  ontoggle={handleToggle}
+  open={shouldBeOpen}
+>
+  <summary
+    class="
+      w-full flex items-center justify-between
+      px-4 py-3
+      text-left
+      bg-surface dark:bg-surface
+      hover:bg-hover dark:hover:bg-hover
+      focus:outline-none focus:ring-2 focus:ring-focus-ring dark:focus:ring-focus-ring
+      cursor-pointer
+      text-text dark:text-text
+    "
+    aria-label={ariaLabel}
+  >
+    <div class="flex items-center gap-2">
+      {#if header}
+        {@render header()}
+      {:else}
+        Item
+      {/if}
+    </div>
+
+    {#if showIcon}
+      <svg
+        class="w-5 h-5 transform transition-transform duration-200 text-muted dark:text-muted"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {/if}
+  </summary>
+
+  <div
+    class="px-4 py-3 bg-background dark:bg-background text-text dark:text-text"
+  >
+    {@render children?.()}
+  </div>
+</details>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .accordion-item {
+    @apply overflow-hidden;
+  }
+
+  .accordion-item.disabled {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
+
+  :is(details[open]) :is(summary) :is(svg) {
+    @apply rotate-180;
+  }
+</style>

package/dist/components/Accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Additional CSS classes */
+    class?: string;
+    /** HTML id for accessibility */
+    id?: string;
+    /** ARIA label for the header */
+    ariaLabel?: string;
+    /** Whether to disable the item controls */
+    disabled?: boolean;
+    /** Whether to show the expand/collapse icon */
+    showIcon?: boolean;
+    children?: Snippet;
+    header?: Snippet;
+}
+/**
+ * AccordionItem - Individual item within an Accordion component.
+ * Uses native HTML details/summary elements for semantic disclosure.
+ *
+ * Usage:
+ * ```svelte
+ * <AccordionItem>
+ * <svelte:fragment slot="header">Section Title</svelte:fragment>
+ * Content goes here
+ * </AccordionItem>
+ * ```
+ */
+declare const AccordionItem: import("svelte").Component<Props, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/App/App.story.md

@@ -0,0 +1,8 @@
+---
+group: 'app'
+icon: 'lucide:layout'
+---
+
+# App
+
+App components are components used in the shell of of apps, such as panel layout, menus, etc.