@sveltia/ui 0.1.4 → 0.2.0

package/package/components/util/portal.svelte.d.ts

@@ -1,21 +0,0 @@
-/** @typedef {typeof __propDef.props}  PortalProps */
-/** @typedef {typeof __propDef.events}  PortalEvents */
-/** @typedef {typeof __propDef.slots}  PortalSlots */
-/** @see https://github.com/sveltejs/svelte/issues/3088 */
-export default class Portal {
-}
-export type PortalProps = typeof __propDef.props;
-export type PortalEvents = typeof __propDef.events;
-export type PortalSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/index.d.ts

@@ -1,41 +0,0 @@
-export { default as Calendar } from "./components/composite/calendar.svelte";
-export { default as CheckboxGroup } from "./components/composite/checkbox-group.svelte";
-export { default as Combobox } from "./components/composite/combobox.svelte";
-export { default as Disclosure } from "./components/composite/disclosure.svelte";
-export { default as Grid } from "./components/composite/grid.svelte";
-export { default as Listbox } from "./components/composite/listbox.svelte";
-export { default as MenuItemGroup } from "./components/composite/menu-item-group.svelte";
-export { default as Menu } from "./components/composite/menu.svelte";
-export { default as RadioButtonGroup } from "./components/composite/radio-button-group.svelte";
-export { default as SelectButtonGroup } from "./components/composite/select-button-group.svelte";
-export { default as Select } from "./components/composite/select.svelte";
-export { default as TabList } from "./components/composite/tab-list.svelte";
-export { default as Button } from "./components/core/button.svelte";
-export { default as Checkbox } from "./components/core/checkbox.svelte";
-export { default as Dialog } from "./components/core/dialog.svelte";
-export { default as GridCell } from "./components/core/grid-cell.svelte";
-export { default as Group } from "./components/core/group.svelte";
-export { default as Icon } from "./components/core/icon.svelte";
-export { default as MenuButton } from "./components/core/menu-button.svelte";
-export { default as MenuItemCheckbox } from "./components/core/menu-item-checkbox.svelte";
-export { default as MenuItemRadio } from "./components/core/menu-item-radio.svelte";
-export { default as MenuItem } from "./components/core/menu-item.svelte";
-export { default as NumberInput } from "./components/core/number-input.svelte";
-export { default as Option } from "./components/core/option.svelte";
-export { default as PasswordInput } from "./components/core/password-input.svelte";
-export { default as RadioButton } from "./components/core/radio-button.svelte";
-export { default as RowGroup } from "./components/core/row-group.svelte";
-export { default as Row } from "./components/core/row.svelte";
-export { default as SearchBar } from "./components/core/search-bar.svelte";
-export { default as SelectButton } from "./components/core/select-button.svelte";
-export { default as Separator } from "./components/core/separator.svelte";
-export { default as Slider } from "./components/core/slider.svelte";
-export { default as Spacer } from "./components/core/spacer.svelte";
-export { default as Switch } from "./components/core/switch.svelte";
-export { default as TabPanel } from "./components/core/tab-panel.svelte";
-export { default as Tab } from "./components/core/tab.svelte";
-export { default as TextArea } from "./components/core/text-area.svelte";
-export { default as TextInput } from "./components/core/text-input.svelte";
-export { default as Toolbar } from "./components/core/toolbar.svelte";
-export { default as MarkdownEditor } from "./components/editor/markdown.svelte";
-export { default as AppShell } from "./components/util/app-shell.svelte";

package/package/index.js

@@ -1,66 +0,0 @@
-import { addMessages, init } from 'svelte-i18n';
-
-/**
- * Load strings and initialize the locales.
- * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
- * @see https://vitejs.dev/guide/features.html#glob-import
- */
-const initLocales = () => {
-  const modules = import.meta.glob('./locales/*.js', { eager: true });
-
-  Object.entries(modules).forEach(([path, { strings }]) => {
-    const [, locale] = path.match(/([a-zA-Z-]+)\.js/);
-
-    // Add `sui` suffix to avoid collision with app localization
-    addMessages(locale, { sui: strings });
-  });
-
-  init({
-    fallbackLocale: 'en',
-    initialLocale: 'en',
-  });
-};
-
-initLocales();
-
-export { default as Calendar } from './components/composite/calendar.svelte';
-export { default as CheckboxGroup } from './components/composite/checkbox-group.svelte';
-export { default as Combobox } from './components/composite/combobox.svelte';
-export { default as Disclosure } from './components/composite/disclosure.svelte';
-export { default as Grid } from './components/composite/grid.svelte';
-export { default as Listbox } from './components/composite/listbox.svelte';
-export { default as MenuItemGroup } from './components/composite/menu-item-group.svelte';
-export { default as Menu } from './components/composite/menu.svelte';
-export { default as RadioButtonGroup } from './components/composite/radio-button-group.svelte';
-export { default as SelectButtonGroup } from './components/composite/select-button-group.svelte';
-export { default as Select } from './components/composite/select.svelte';
-export { default as TabList } from './components/composite/tab-list.svelte';
-export { default as Button } from './components/core/button.svelte';
-export { default as Checkbox } from './components/core/checkbox.svelte';
-export { default as Dialog } from './components/core/dialog.svelte';
-export { default as GridCell } from './components/core/grid-cell.svelte';
-export { default as Group } from './components/core/group.svelte';
-export { default as Icon } from './components/core/icon.svelte';
-export { default as MenuButton } from './components/core/menu-button.svelte';
-export { default as MenuItemCheckbox } from './components/core/menu-item-checkbox.svelte';
-export { default as MenuItemRadio } from './components/core/menu-item-radio.svelte';
-export { default as MenuItem } from './components/core/menu-item.svelte';
-export { default as NumberInput } from './components/core/number-input.svelte';
-export { default as Option } from './components/core/option.svelte';
-export { default as PasswordInput } from './components/core/password-input.svelte';
-export { default as RadioButton } from './components/core/radio-button.svelte';
-export { default as RowGroup } from './components/core/row-group.svelte';
-export { default as Row } from './components/core/row.svelte';
-export { default as SearchBar } from './components/core/search-bar.svelte';
-export { default as SelectButton } from './components/core/select-button.svelte';
-export { default as Separator } from './components/core/separator.svelte';
-export { default as Slider } from './components/core/slider.svelte';
-export { default as Spacer } from './components/core/spacer.svelte';
-export { default as Switch } from './components/core/switch.svelte';
-export { default as TabPanel } from './components/core/tab-panel.svelte';
-export { default as Tab } from './components/core/tab.svelte';
-export { default as TextArea } from './components/core/text-area.svelte';
-export { default as TextInput } from './components/core/text-input.svelte';
-export { default as Toolbar } from './components/core/toolbar.svelte';
-export { default as MarkdownEditor } from './components/editor/markdown.svelte';
-export { default as AppShell } from './components/util/app-shell.svelte';

package/package/locales/en.d.ts

@@ -1,42 +0,0 @@
-export namespace strings {
-    namespace _ {
-        const ok: string;
-        const cancel: string;
-        const close: string;
-        const clear: string;
-        const remove: string;
-        const collapse: string;
-        const expand: string;
-    }
-    namespace calendar {
-        const year: string;
-        const previous_decade: string;
-        const next_decade: string;
-        const month: string;
-        const previous_month: string;
-        const next_month: string;
-        const today: string;
-    }
-    namespace combobox {
-        const select_an_option: string;
-    }
-    namespace number_input {
-        const decrease: string;
-        const increase: string;
-    }
-    namespace password_input {
-        const show_password: string;
-    }
-    namespace markdown_editor {
-        const markdown_editor_1: string;
-        export { markdown_editor_1 as markdown_editor };
-        export const bold: string;
-        export const italic: string;
-        export const code: string;
-        export const link: string;
-        export const heading_x: string;
-        export const quote: string;
-        export const bulleted_list: string;
-        export const numbered_list: string;
-    }
-}

package/package/locales/en.js

@@ -1,41 +0,0 @@
-export const strings = {
-  _: {
-    ok: 'OK',
-    cancel: 'Cancel',
-    close: 'Close',
-    clear: 'Clear',
-    remove: 'Remove',
-    collapse: 'Collapse',
-    expand: 'Expand',
-  },
-  calendar: {
-    year: 'Year',
-    previous_decade: 'Previous Decade',
-    next_decade: 'Next Decade',
-    month: 'Month',
-    previous_month: 'Previous Month',
-    next_month: 'Next Month',
-    today: 'Today',
-  },
-  combobox: {
-    select_an_option: 'Select an option…',
-  },
-  number_input: {
-    decrease: 'Decrease',
-    increase: 'Increase',
-  },
-  password_input: {
-    show_password: 'Show Password',
-  },
-  markdown_editor: {
-    markdown_editor: 'Markdown Editor',
-    bold: 'Bold',
-    italic: 'Italic',
-    code: 'Code',
-    link: 'Link',
-    heading_x: 'Heading {level}',
-    quote: 'Quote',
-    bulleted_list: 'Bulleted List',
-    numbered_list: 'Numbered List',
-  },
-};

package/package/locales/ja.d.ts

@@ -1,42 +0,0 @@
-export namespace strings {
-    namespace _ {
-        const ok: string;
-        const cancel: string;
-        const close: string;
-        const clear: string;
-        const remove: string;
-        const collapse: string;
-        const expand: string;
-    }
-    namespace calendar {
-        const year: string;
-        const previous_decade: string;
-        const next_decade: string;
-        const month: string;
-        const previous_month: string;
-        const next_month: string;
-        const today: string;
-    }
-    namespace combobox {
-        const select_an_option: string;
-    }
-    namespace number_input {
-        const decrease: string;
-        const increase: string;
-    }
-    namespace password_input {
-        const show_password: string;
-    }
-    namespace markdown_editor {
-        const markdown_editor_1: string;
-        export { markdown_editor_1 as markdown_editor };
-        export const bold: string;
-        export const italic: string;
-        export const code: string;
-        export const link: string;
-        export const heading_x: string;
-        export const quote: string;
-        export const bulleted_list: string;
-        export const numbered_list: string;
-    }
-}

package/package/locales/ja.js

@@ -1,41 +0,0 @@
-export const strings = {
-  _: {
-    ok: 'OK',
-    cancel: 'キャンセル',
-    close: '閉じる',
-    clear: 'クリア',
-    remove: '削除',
-    collapse: '折り畳む',
-    expand: '広げる',
-  },
-  calendar: {
-    year: '年',
-    previous_decade: '前の 10 年',
-    next_decade: '次の 10 年',
-    month: '月',
-    previous_month: '前月',
-    next_month: '翌月',
-    today: '今日',
-  },
-  combobox: {
-    select_an_option: 'オプションを選択…',
-  },
-  number_input: {
-    decrease: '減らす',
-    increase: '増やす',
-  },
-  password_input: {
-    show_password: 'パスワードを表示',
-  },
-  markdown_editor: {
-    markdown_editor: 'Markdown エディター',
-    bold: '太字',
-    italic: '斜体',
-    code: 'コード',
-    link: 'リンク',
-    heading_x: '見出し {level}',
-    quote: '引用',
-    bulleted_list: '番号なしリスト',
-    numbered_list: '番号付きリスト',
-  },
-};

package/package/styles/core.scss

@@ -1,134 +0,0 @@
-@use "variables.scss";
-
-// https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
-@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
-// https://fonts.google.com/icons?icon.set=Material+Symbols
-// Use `font-display: block;` @see https://stackoverflow.com/q/41710834
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
-
-.material-symbols-outlined {
-  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
-}
-
-* {
-  scroll-behavior: smooth;
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-}
-
-:focus {
-  z-index: 1;
-  outline-width: 0;
-}
-
-:focus-visible {
-  outline-offset: -2px;
-  outline-width: 2px !important;
-  outline-style: solid;
-  outline-color: hsl(var(--hue) 100% 50% / 25%);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  font-weight: var(--default-font-weight-bold);
-}
-
-strong {
-  font-weight: var(--default-font-weight-bold);
-}
-
-a {
-  color: var(--primary-accent-color-lighter);
-  text-decoration: none;
-}
-
-img,
-svg,
-iframe {
-  vertical-align: top;
-}
-
-button,
-input,
-textarea,
-select,
-option {
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-p,
-li {
-  line-height: 1.75;
-}
-
-[role="grid"] {
-  display: table;
-  width: 100%;
-
-  .colgroup {
-    display: table-column-group;
-
-    .col {
-      display: table-column;
-    }
-  }
-}
-
-code,
-pre {
-  font-family: var(--monospace-font-family);
-}
-
-pre {
-  line-height: 1.5;
-  -webkit-user-select: text;
-  user-select: text;
-}
-
-dialog {
-  position: fixed;
-  inset: 0;
-  outline: 0;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
-  color: inherit;
-  background: transparent;
-  -webkit-user-select: none;
-  user-select: none;
-  touch-action: none;
-  cursor: default;
-
-  &::backdrop {
-    background: transparent;
-  }
-}
-
-.thead[role="rowgroup"] {
-  display: table-header-group;
-}
-
-.tbody[role="rowgroup"] {
-  display: table-row-group;
-}
-
-[role="row"] {
-  display: table-row;
-}
-
-[role="columnheader"],
-[role="gridcell"] {
-  display: table-cell;
-}

package/package/styles/variables.scss

@@ -1,114 +0,0 @@
-:root {
-  // Base HSL
-  --hue: 210;
-  // Foreground
-  --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
-  --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
-  --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --ternary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
-  --danger-foreground-color: hsl(var(--danger-color));
-  // Background
-  --highlight-background-color: hsl(var(--background-color-5-hsl));
-  --content-background-color: hsl(var(--background-color-1-hsl));
-  --primary-background-color: hsl(var(--background-color-2-hsl));
-  --secondary-background-color: hsl(var(--background-color-3-hsl));
-  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 88%);
-  --ternary-background-color: hsl(var(--background-color-4-hsl));
-  --control-background-color: hsl(var(--background-color-1-hsl));
-  --disabled-background-color: hsl(var(--background-color-4-hsl));
-  --danger-background-color: hsl(var(--danger-color));
-  // Borders
-  --primary-border-color: hsl(var(--border-color-1-hsl));
-  --secondary-border-color: hsl(var(--border-color-2-hsl));
-  --control-border-color: hsl(var(--border-color-2-hsl));
-  // Shadows
-  --popup-shadow-color: hsl(var(--shadow-color) / 40%);
-  --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
-  // Fonts
-  --default-font-family: "Merriweather Sans", sans-serif;
-  --default-font-size: 13px;
-  --default-font-weight-regular: 300;
-  --default-font-weight-bold: 600;
-  --monospace-font-family: "Noto Sans Mono", monospace;
-  --monospace-font-size: 13px;
-  // Controls
-  --control--small--border-width: 1px;
-  --control--small--border-radius: 2px;
-  --control--small--height: 24px;
-  --control--medium--border-width: 1px;
-  --control--medium--border-radius: 4px;
-  --control--medium--height: 32px;
-  --control--large--border-width: 1px;
-  --control--large--border-radius: 8px;
-  --control--large--height: 40px;
-  // Buttons
-  --button--small--border-radius: var(--control--small--border-radius);
-  --button--small--height: var(--control--small--height);
-  --button--medium--border-radius: var(--control--medium--border-radius);
-  --button--medium--height: var(--control--medium--height);
-  --button--large--border-radius: var(--control--large--border-radius);
-  --button--large--height: var(--control--large--height);
-  // Options & menu items
-  --option--small--border-radius: var(--control--small--border-radius);
-  --option--small--height: var(--control--small--height);
-  --option--medium--border-radius: var(--control--medium--border-radius);
-  --option--medium--height: var(--control--medium--height);
-  --option--large--border-radius: var(--control--large--border-radius);
-  --option--large--height: var(--control--large--height);
-  // Input
-  --input--small--border-radius: var(--control--small--border-radius);
-  --input--small--height: var(--control--small--height);
-  --input--medium--border-radius: var(--control--medium--border-radius);
-  --input--medium--height: var(--control--medium--height);
-  --input--large--border-radius: var(--control--large--border-radius);
-  --input--large--height: var(--control--large--height);
-  // Tab
-  --tab--small--height: var(--control--small--height);
-  --tab--medium--height: var(--control--medium--height);
-  --tab--large--height: var(--control--large--height);
-}
-
-:root[data-theme="light"] {
-  --foreground-color-1-hsl: var(--hue) 5% 0%; // highlight
-  --foreground-color-2-hsl: var(--hue) 5% 20%; // primary
-  --foreground-color-3-hsl: var(--hue) 5% 40%; // secondary
-  --foreground-color-4-hsl: var(--hue) 5% 60%; // ternary
-  --border-color-1-hsl: var(--hue) 5% 75%; // primary
-  --border-color-2-hsl: var(--hue) 5% 80%; // secondary/input
-  --background-color-1-hsl: var(--hue) 5% 100%; // content
-  --background-color-2-hsl: var(--hue) 5% 98%; // primary
-  --background-color-3-hsl: var(--hue) 5% 96%; // secondary/ternary
-  --background-color-4-hsl: var(--hue) 5% 94%; // disabled
-  --background-color-5-hsl: var(--hue) 5% 90%; // highlight
-  --shadow-color: var(--hue) 10% 0%;
-  // Accents
-  --primary-accent-color: hsl(var(--hue) 80% 45%);
-  --primary-accent-color-lighter: hsl(var(--hue) 80% 40%);
-  --primary-accent-color-darker: hsl(var(--hue) 80% 50%);
-  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%); // white/inverted
-  // States
-  --danger-color: 0 68% 42%; // firebrick
-}
-
-:root[data-theme="dark"] {
-  --foreground-color-1-hsl: var(--hue) 10% 100%; // highlight
-  --foreground-color-2-hsl: var(--hue) 10% 80%; // primary
-  --foreground-color-3-hsl: var(--hue) 10% 60%; // secondary
-  --foreground-color-4-hsl: var(--hue) 10% 40%; // ternary
-  --border-color-1-hsl: var(--hue) 10% 25%; // primary
-  --border-color-2-hsl: var(--hue) 10% 20%; // secondary/input
-  --background-color-1-hsl: var(--hue) 10% 8%; // content
-  --background-color-2-hsl: var(--hue) 10% 10%; // primary
-  --background-color-3-hsl: var(--hue) 10% 12%; // secondary/ternary
-  --background-color-4-hsl: var(--hue) 10% 14%; // disabled
-  --background-color-5-hsl: var(--hue) 10% 18%; // highlight
-  --shadow-color: var(--hue) 10% 0%;
-  // Accents
-  --primary-accent-color: hsl(var(--hue) 100% 45%); // 4.57 AA w/ #FFF foreground color
-  --primary-accent-color-lighter: hsl(var(--hue) 100% 50%);
-  --primary-accent-color-darker: hsl(var(--hue) 100% 40%);
-  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%); // white
-  // States
-  --danger-color: 0 68% 42%; // firebrick
-}