@x33025/sveltely 0.1.1 → 0.1.3

package/dist/style/layout.js

@@ -0,0 +1,128 @@
+export const LayoutSize = {
+    full: 'full',
+    fit: 'fit'
+};
+export const LayoutOverflow = {
+    visible: 'visible',
+    hidden: 'hidden',
+    clip: 'clip',
+    auto: 'auto',
+    scroll: 'scroll'
+};
+export const LayoutAlignment = {
+    start: 'start',
+    center: 'center',
+    end: 'end',
+    stretch: 'stretch',
+    baseline: 'baseline'
+};
+export const LayoutJustification = {
+    start: 'start',
+    center: 'center',
+    end: 'end',
+    between: 'between',
+    around: 'around',
+    evenly: 'evenly'
+};
+const LAYOUT_PROP_KEYS = new Set([
+    'size',
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'grow',
+    'shrink',
+    'basis',
+    'border',
+    'overflow',
+    'align',
+    'justify'
+]);
+const toRem = (value) => value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
+const toSize = (value) => {
+    if (value === 'full')
+        return '100%';
+    if (value === 'fit')
+        return 'fit-content';
+    return toRem(value);
+};
+const pushDeclaration = (declarations, name, value) => {
+    const resolved = toRem(value);
+    if (resolved === undefined)
+        return;
+    declarations.push(`${name}: ${resolved};`);
+};
+const pushFlexValue = (declarations, name, value) => {
+    if (value === undefined)
+        return;
+    declarations.push(`${name}: ${value === true ? 1 : value === false ? 0 : value};`);
+};
+const alignValues = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+    baseline: 'baseline'
+};
+const justifyValues = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly'
+};
+export const extractLayoutProps = (props) => {
+    const layoutProps = {};
+    const restProps = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (LAYOUT_PROP_KEYS.has(key)) {
+            layoutProps[key] = value;
+            continue;
+        }
+        restProps[key] = value;
+    }
+    return {
+        layoutProps,
+        restProps
+    };
+};
+export const layoutStyle = (styles) => {
+    if (!styles)
+        return '';
+    const declarations = [];
+    const resolvedSize = toSize(styles.size);
+    if (resolvedSize !== undefined) {
+        declarations.push(`width: ${resolvedSize};`, `height: ${resolvedSize};`);
+    }
+    pushDeclaration(declarations, 'width', styles.width);
+    pushDeclaration(declarations, 'height', styles.height);
+    pushDeclaration(declarations, 'min-width', styles.minWidth);
+    pushDeclaration(declarations, 'min-height', styles.minHeight);
+    pushDeclaration(declarations, 'max-width', styles.maxWidth);
+    pushDeclaration(declarations, 'max-height', styles.maxHeight);
+    pushFlexValue(declarations, 'flex-grow', styles.grow);
+    pushFlexValue(declarations, 'flex-shrink', styles.shrink);
+    pushDeclaration(declarations, 'flex-basis', styles.basis);
+    if (styles.border === true) {
+        declarations.push('border: 1px solid var(--sveltely-border-color);');
+    }
+    else if (typeof styles.border === 'string') {
+        const borderValue = /\b(solid|dashed|dotted|double|none|hidden)\b|\d/.test(styles.border)
+            ? styles.border
+            : `1px solid ${styles.border}`;
+        declarations.push(`border: ${borderValue};`);
+    }
+    if (styles.overflow !== undefined) {
+        declarations.push(`overflow: ${styles.overflow};`);
+    }
+    if (styles.align !== undefined) {
+        declarations.push(`align-items: ${alignValues[styles.align]};`);
+    }
+    if (styles.justify !== undefined) {
+        declarations.push(`justify-content: ${justifyValues[styles.justify]};`);
+    }
+    return declarations.join(' ');
+};

package/dist/style/media.d.ts

@@ -0,0 +1,12 @@
+export declare const ImageFit: {
+    readonly contain: "contain";
+    readonly cover: "cover";
+};
+export declare const ImageLoading: {
+    readonly eager: "eager";
+    readonly lazy: "lazy";
+};
+export type ImageFitValue = (typeof ImageFit)[keyof typeof ImageFit];
+export type ImageLoadingValue = (typeof ImageLoading)[keyof typeof ImageLoading];
+export type ImageFit = ImageFitValue;
+export type ImageLoading = ImageLoadingValue;

package/dist/style/media.js

@@ -0,0 +1,8 @@
+export const ImageFit = {
+    contain: 'contain',
+    cover: 'cover'
+};
+export const ImageLoading = {
+    eager: 'eager',
+    lazy: 'lazy'
+};

package/dist/style/scroll.d.ts

@@ -0,0 +1,7 @@
+export declare const ScrollAxis: {
+    readonly vertical: "vertical";
+    readonly horizontal: "horizontal";
+    readonly both: "both";
+};
+export type ScrollAxisValue = (typeof ScrollAxis)[keyof typeof ScrollAxis];
+export type ScrollAxis = ScrollAxisValue;

package/dist/style/scroll.js

@@ -0,0 +1,5 @@
+export const ScrollAxis = {
+    vertical: 'vertical',
+    horizontal: 'horizontal',
+    both: 'both'
+};

package/dist/style/text-editor.d.ts

@@ -0,0 +1,34 @@
+export declare const TextAlignment: {
+    readonly left: "left";
+    readonly center: "center";
+    readonly right: "right";
+    readonly start: "start";
+    readonly end: "end";
+};
+export type TextAlignmentValue = (typeof TextAlignment)[keyof typeof TextAlignment];
+export type TextAlignment = TextAlignmentValue;
+export declare const TextInputMode: {
+    readonly none: "none";
+    readonly text: "text";
+    readonly tel: "tel";
+    readonly url: "url";
+    readonly email: "email";
+    readonly numeric: "numeric";
+    readonly decimal: "decimal";
+    readonly search: "search";
+};
+export declare const TextFieldType: {
+    readonly text: "text";
+    readonly email: "email";
+    readonly password: "password";
+    readonly url: "url";
+    readonly tel: "tel";
+};
+export type TextInputModeValue = (typeof TextInputMode)[keyof typeof TextInputMode];
+export type TextFieldTypeValue = (typeof TextFieldType)[keyof typeof TextFieldType];
+export type TextInputMode = TextInputModeValue;
+export type TextFieldType = TextFieldTypeValue;
+export type TextEditorProps = {
+    textAlign?: TextAlignment;
+};
+export declare const textEditorStyle: (props?: TextEditorProps, prefix?: string) => string;

package/dist/style/text-editor.js

@@ -0,0 +1,29 @@
+export const TextAlignment = {
+    left: 'left',
+    center: 'center',
+    right: 'right',
+    start: 'start',
+    end: 'end'
+};
+export const TextInputMode = {
+    none: 'none',
+    text: 'text',
+    tel: 'tel',
+    url: 'url',
+    email: 'email',
+    numeric: 'numeric',
+    decimal: 'decimal',
+    search: 'search'
+};
+export const TextFieldType = {
+    text: 'text',
+    email: 'email',
+    password: 'password',
+    url: 'url',
+    tel: 'tel'
+};
+export const textEditorStyle = (props, prefix = 'text-field') => {
+    if (!props?.textAlign)
+        return '';
+    return `--${prefix}-text-align: ${props.textAlign};`;
+};

package/dist/style.css

@@ -7,20 +7,17 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
-    --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
-    --color-zinc-300: oklch(87.1% 0.006 286.286);
-    --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
-    --color-zinc-600: oklch(44.2% 0.017 285.786);
-    --color-zinc-700: oklch(37% 0.013 285.805);
-    --color-zinc-800: oklch(27.4% 0.006 286.033);
     --color-zinc-900: oklch(21% 0.006 285.885);
-    --color-zinc-950: oklch(14.1% 0.005 285.823);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
@@ -203,6 +200,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -257,6 +257,9 @@
   .inline-grid {
     display: inline-grid;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -271,6 +274,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-36 {
+    height: calc(var(--spacing) * 36);
+  }
   .h-full {
     height: 100%;
   }
@@ -280,33 +286,48 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
-  .w-64 {
-    width: calc(var(--spacing) * 64);
-  }
   .w-fit {
     width: fit-content;
   }
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
+  .max-w-32 {
+    max-width: calc(var(--spacing) * 32);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
   .flex-1 {
     flex: 1;
   }
   .flex-shrink {
     flex-shrink: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .grow {
+    flex-grow: 1;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -319,6 +340,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .resize {
     resize: both;
   }
@@ -337,14 +361,20 @@
   .items-center {
     align-items: center;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
-  .justify-end {
-    justify-content: flex-end;
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
   }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
@@ -362,6 +392,11 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -377,6 +412,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -393,15 +431,45 @@
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-zinc-100 {
+    background-color: var(--color-zinc-100);
+  }
+  .bg-zinc-200 {
+    background-color: var(--color-zinc-200);
+  }
+  .object-contain {
+    object-fit: contain;
+  }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
   .text-left {
     text-align: left;
   }
@@ -440,27 +508,18 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[var\(--sveltely-primary-color\)\] {
+    color: var(--sveltely-primary-color);
+  }
+  .text-\[var\(--sveltely-secondary-color\)\] {
+    color: var(--sveltely-secondary-color);
+  }
   .text-gray-700 {
     color: var(--color-gray-700);
   }
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-zinc-500 {
-    color: var(--color-zinc-500);
-  }
-  .text-zinc-600 {
-    color: var(--color-zinc-600);
-  }
-  .text-zinc-700 {
-    color: var(--color-zinc-700);
-  }
-  .text-zinc-900 {
-    color: var(--color-zinc-900);
-  }
-  .text-zinc-950 {
-    color: var(--color-zinc-950);
-  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -504,6 +563,10 @@
     --tw-blur: blur(var(--blur-xs));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .grayscale {
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -540,9 +603,9 @@
       background-color: var(--color-zinc-200);
     }
   }
-  .disabled\:text-zinc-500 {
+  .disabled\:text-\[var\(--sveltely-secondary-color\)\] {
     &:disabled {
-      color: var(--color-zinc-500);
+      color: var(--sveltely-secondary-color);
     }
   }
   .disabled\:opacity-50 {
@@ -550,19 +613,14 @@
       opacity: 50%;
     }
   }
-  .md\:grid-flow-dense {
-    @media (width >= 48rem) {
-      grid-auto-flow: dense;
-    }
-  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .xl\:grid-cols-3 {
-    @media (width >= 80rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+  .md\:grid-cols-\[minmax\(0\,18rem\)_minmax\(8rem\,1fr\)\] {
+    @media (width >= 48rem) {
+      grid-template-columns: minmax(0,18rem) minmax(8rem,1fr);
     }
   }
 }
@@ -570,17 +628,19 @@
   :root {
     --sveltely-font-size: 1rem;
     --sveltely-border-radius: 0.75rem;
-    --sveltely-inset: 0px;
+    --sveltely-inset: 0.25rem;
     --sveltely-nested-inset: var(--sveltely-inset);
     --sveltely-padding-x: 0.75rem;
     --sveltely-padding-y: 0.75rem;
     --sveltely-gap: 0.5rem;
     --sveltely-primary-color: var(--color-zinc-900);
-    --sveltely-active-color: var(--sveltely-primary-color);
-    --sveltely-inactive-color: var(--color-zinc-100);
-    --sveltely-hover-color: var(--sveltely-primary-color);
+    --sveltely-secondary-color: var(--color-zinc-500);
+    --sveltely-active-color: var(--color-zinc-900);
+    --sveltely-inactive-color: var(--sveltely-active-color);
+    --sveltely-background-color: white;
+    --sveltely-hover-color: var(--sveltely-active-color);
     @supports (color: color-mix(in lab, red, red)) {
-      --sveltely-hover-color: color-mix(in oklab, var(--sveltely-primary-color) 5%, transparent);
+      --sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
     }
     --sveltely-inactive-hover-color: var(--sveltely-inactive-color);
     @supports (color: color-mix(in lab, red, red)) {
@@ -601,6 +661,8 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    background: var(--sveltely-background-color);
+    color: var(--sveltely-primary-color);
     -webkit-user-select: none;
     user-select: none;
   }
@@ -612,6 +674,12 @@
     appearance: none;
     background-clip: padding-box;
   }
+  button {
+    cursor: pointer;
+  }
+  button:disabled {
+    cursor: not-allowed;
+  }
   input::-webkit-search-decoration,	input::-webkit-search-cancel-button,	input::-webkit-search-results-button,	input::-webkit-search-results-decoration {
     -webkit-appearance: none;
     appearance: none;
@@ -647,24 +715,10 @@
     min-width: calc(var(--spacing) * 0);
     flex-direction: row;
   }
-  .spacer {
-    flex: 1 1 auto;
-  }
-  .divider {
-    background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
-    }
+  .button,	.async-button,	.segmented-picker,	.switch,	.checkbox,	.search-field,	.token-search-field,	.chip-input,	.dropdown,	.pagination,	.calendar,	.wheel-picker,	.time-picker,	.slider,	.spinner,	.image,	.image-mask,	.text-shimmer {
+    flex-shrink: 0;
   }
 }
-.hstack > .divider {
-  width: 1px;
-  align-self: stretch;
-}
-.vstack > .divider {
-  height: 1px;
-  width: 100%;
-}
 .overflow-auto > .vstack, .overflow-auto > .hstack, .overflow-auto > .grid {
   flex-shrink: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/components/Library/Dropdown/types.d.ts

@@ -1,27 +0,0 @@
-import type { Anchor } from '../../../utils/positioning';
-export type DropdownItem<TValue extends string | number = string> = {
-    type?: 'option';
-    label: string;
-    value: TValue;
-    disabled?: boolean;
-};
-export type DropdownAction = {
-    type: 'action';
-    label: string;
-    disabled?: boolean;
-    onSelect: () => void;
-};
-export type DropdownSubmenu<TValue extends string | number = string> = {
-    type: 'submenu';
-    label: string;
-    disabled?: boolean;
-    items: DropdownEntry<TValue>[];
-    placement?: Anchor;
-};
-export type DropdownGroup<TValue extends string | number = string> = {
-    type: 'group';
-    label?: string;
-    disabled?: boolean;
-    items: DropdownEntry<TValue>[];
-};
-export type DropdownEntry<TValue extends string | number = string> = DropdownItem<TValue> | DropdownAction | DropdownGroup<TValue> | DropdownSubmenu<TValue>;

package/dist/components/Library/SearchInput/SearchInput.demo.svelte.d.ts

@@ -1,8 +0,0 @@
-export declare const demo: {
-    name: string;
-    description: string;
-};
-import SearchInput from './SearchInput.svelte';
-declare const SearchInput: import("svelte").Component<Record<string, never>, {}, "">;
-type SearchInput = ReturnType<typeof SearchInput>;
-export default SearchInput;

package/dist/components/Library/SearchInput/index.d.ts

@@ -1 +0,0 @@
-export { default } from './SearchInput.svelte';

package/dist/components/Library/SearchInput/index.js

@@ -1 +0,0 @@
-export { default } from './SearchInput.svelte';

package/dist/components/Library/TokenSearchInput/TokenSearchInput.demo.svelte.d.ts

@@ -1,9 +0,0 @@
-export declare const demo: {
-    name: string;
-    description: string;
-    columnSpan: number;
-};
-import TokenSearchInput from './TokenSearchInput.svelte';
-declare const TokenSearchInput: import("svelte").Component<Record<string, never>, {}, "">;
-type TokenSearchInput = ReturnType<typeof TokenSearchInput>;
-export default TokenSearchInput;

package/dist/components/Library/TokenSearchInput/index.d.ts

@@ -1 +0,0 @@
-export { default } from './TokenSearchInput.svelte';

package/dist/components/Library/TokenSearchInput/index.js

@@ -1 +0,0 @@
-export { default } from './TokenSearchInput.svelte';