@sentropic/design-system-svelte 0.3.0 → 0.4.1

package/dist/Toggle.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type ToggleProps = Omit<HTMLInputAttributes, "class" | "role" | "type" | "size"> & {
+    label: string;
+    labelOn?: string;
+    labelOff?: string;
+    helperText?: string;
+    size?: "sm" | "md";
+    checked?: boolean;
+    class?: string;
+  };
+
+  let {
+    label,
+    labelOn = "On",
+    labelOff = "Off",
+    helperText,
+    size = "md",
+    checked = $bindable(false),
+    class: className,
+    ...rest
+  }: ToggleProps = $props();
+
+  const classes = () =>
+    ["st-toggle", `st-toggle--${size}`, className].filter(Boolean).join(" ");
+</script>
+
+<label class={classes()}>
+  <span class="st-toggle__label">{label}</span>
+  <span class="st-toggle__row">
+    <input
+      {...rest}
+      class="st-toggle__input"
+      type="checkbox"
+      role="switch"
+      bind:checked
+      aria-checked={checked ? "true" : "false"}
+    />
+    <span class="st-toggle__track" aria-hidden="true">
+      <span class="st-toggle__thumb"></span>
+    </span>
+    <span class="st-toggle__state" aria-hidden="true">{checked ? labelOn : labelOff}</span>
+  </span>
+  {#if helperText}<span class="st-toggle__help">{helperText}</span>{/if}
+</label>
+
+<style>
+  .st-toggle {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    display: inline-grid;
+    gap: 0.375rem;
+  }
+
+  .st-toggle__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-toggle__row {
+    align-items: center;
+    display: inline-flex;
+    gap: 0.625rem;
+    position: relative;
+  }
+
+  .st-toggle__input {
+    height: var(--st-toggle-trackHeight, 1.25rem);
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    width: var(--st-toggle-trackWidth, 2.25rem);
+  }
+
+  .st-toggle__track {
+    align-items: center;
+    background: var(--st-component-selection-switchTrack, var(--st-semantic-border-strong));
+    border-radius: var(--st-radius-pill, 999px);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: var(--st-toggle-trackHeight, 1.25rem);
+    padding: 0.125rem;
+    transition: background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: var(--st-toggle-trackWidth, 2.25rem);
+  }
+
+  .st-toggle__thumb {
+    background: var(--st-component-selection-switchThumb, var(--st-semantic-surface-default));
+    border-radius: var(--st-radius-pill, 999px);
+    height: var(--st-toggle-thumbSize, 1rem);
+    transform: translateX(0);
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: var(--st-toggle-thumbSize, 1rem);
+  }
+
+  .st-toggle__input:checked + .st-toggle__track {
+    background: var(--st-component-selection-switchTrackChecked, var(--st-semantic-action-primary));
+  }
+
+  .st-toggle__input:checked + .st-toggle__track .st-toggle__thumb {
+    transform: translateX(calc(var(--st-toggle-trackWidth, 2.25rem) - var(--st-toggle-thumbSize, 1rem) - 0.25rem));
+  }
+
+  .st-toggle__input:focus-visible + .st-toggle__track {
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+  }
+
+  .st-toggle__input:disabled + .st-toggle__track {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .st-toggle__state {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .st-toggle__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+
+  .st-toggle--sm {
+    --st-toggle-trackHeight: 1rem;
+    --st-toggle-trackWidth: 1.875rem;
+    --st-toggle-thumbSize: 0.75rem;
+  }
+
+  .st-toggle--md {
+    --st-toggle-trackHeight: 1.25rem;
+    --st-toggle-trackWidth: 2.25rem;
+    --st-toggle-thumbSize: 1rem;
+  }
+</style>

package/dist/Toggle.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type ToggleProps = Omit<HTMLInputAttributes, "class" | "role" | "type" | "size"> & {
+    label: string;
+    labelOn?: string;
+    labelOff?: string;
+    helperText?: string;
+    size?: "sm" | "md";
+    checked?: boolean;
+    class?: string;
+};
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;
+//# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/Toggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoCJ,QAAA,MAAM,MAAM,wDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/index.d.ts

@@ -1,9 +1,12 @@
+export { default as Accordion } from "./Accordion.svelte";
 export { default as Alert } from "./Alert.svelte";
 export { default as Badge } from "./Badge.svelte";
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
 export { default as Button } from "./Button.svelte";
 export { default as Card } from "./Card.svelte";
 export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Combobox } from "./Combobox.svelte";
+export { default as DataTable } from "./DataTable.svelte";
 export { default as Drawer } from "./Drawer.svelte";
 export { default as Dropdown } from "./Dropdown.svelte";
 export { default as EmptyState } from "./EmptyState.svelte";
@@ -12,21 +15,33 @@ export { default as Link } from "./Link.svelte";
 export { default as LoadingState } from "./LoadingState.svelte";
 export { default as Menu } from "./Menu.svelte";
 export { default as Modal } from "./Modal.svelte";
+export { default as MultiSelect } from "./MultiSelect.svelte";
+export { default as NumberInput } from "./NumberInput.svelte";
 export { default as Pagination } from "./Pagination.svelte";
+export { default as PasswordInput } from "./PasswordInput.svelte";
 export { default as Popover } from "./Popover.svelte";
+export { default as ProgressBar } from "./ProgressBar.svelte";
 export { default as Radio } from "./Radio.svelte";
+export { default as Search } from "./Search.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as SideNav } from "./SideNav.svelte";
+export { default as Slider } from "./Slider.svelte";
 export { default as Switch } from "./Switch.svelte";
 export { default as Table } from "./Table.svelte";
 export { default as Tabs } from "./Tabs.svelte";
+export { default as Tag } from "./Tag.svelte";
 export { default as ThemeProvider } from "./ThemeProvider.svelte";
 export { default as Textarea } from "./Textarea.svelte";
 export { default as Toast } from "./Toast.svelte";
+export { default as Toggle } from "./Toggle.svelte";
 export { default as Tooltip } from "./Tooltip.svelte";
+export type { AccordionItem } from "./Accordion.svelte";
 export type { BreadcrumbItem } from "./Breadcrumb.svelte";
+export type { ComboboxOption } from "./Combobox.svelte";
+export type { DataTableColumn, DataTableRow, DataTableSelectMode, DataTableSort } from "./DataTable.svelte";
 export type { DropdownOption } from "./Dropdown.svelte";
 export type { MenuItem } from "./Menu.svelte";
+export type { MultiSelectOption } from "./MultiSelect.svelte";
 export type { SideNavItem } from "./SideNav.svelte";
 export type { TableColumn, TableRow } from "./Table.svelte";
 export type { TabItem } from "./Tabs.svelte";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC5D,YAAY,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,9 +1,12 @@
+export { default as Accordion } from "./Accordion.svelte";
 export { default as Alert } from "./Alert.svelte";
 export { default as Badge } from "./Badge.svelte";
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
 export { default as Button } from "./Button.svelte";
 export { default as Card } from "./Card.svelte";
 export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Combobox } from "./Combobox.svelte";
+export { default as DataTable } from "./DataTable.svelte";
 export { default as Drawer } from "./Drawer.svelte";
 export { default as Dropdown } from "./Dropdown.svelte";
 export { default as EmptyState } from "./EmptyState.svelte";
@@ -12,15 +15,23 @@ export { default as Link } from "./Link.svelte";
 export { default as LoadingState } from "./LoadingState.svelte";
 export { default as Menu } from "./Menu.svelte";
 export { default as Modal } from "./Modal.svelte";
+export { default as MultiSelect } from "./MultiSelect.svelte";
+export { default as NumberInput } from "./NumberInput.svelte";
 export { default as Pagination } from "./Pagination.svelte";
+export { default as PasswordInput } from "./PasswordInput.svelte";
 export { default as Popover } from "./Popover.svelte";
+export { default as ProgressBar } from "./ProgressBar.svelte";
 export { default as Radio } from "./Radio.svelte";
+export { default as Search } from "./Search.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as SideNav } from "./SideNav.svelte";
+export { default as Slider } from "./Slider.svelte";
 export { default as Switch } from "./Switch.svelte";
 export { default as Table } from "./Table.svelte";
 export { default as Tabs } from "./Tabs.svelte";
+export { default as Tag } from "./Tag.svelte";
 export { default as ThemeProvider } from "./ThemeProvider.svelte";
 export { default as Textarea } from "./Textarea.svelte";
 export { default as Toast } from "./Toast.svelte";
+export { default as Toggle } from "./Toggle.svelte";
 export { default as Tooltip } from "./Tooltip.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
     "dist"
   ],
   "dependencies": {
-    "@sentropic/design-system-themes": "0.3.0"
+    "@sentropic/design-system-themes": "0.4.1"
   },
   "peerDependencies": {
     "svelte": "^5.53.2"