@flightlesslabs/dodo-ui 0.19.1 → 1.0.0--beta-2

package/dist/index.d.ts

@@ -1,128 +1,15 @@
-export type { ComponentColorPriority, ComponentColorSeverity, ComponentColor, } from './types/colors.js';
-export type { ComponentRoundness } from './types/roundness.js';
-export type { ComponentSize } from './types/size.js';
-export type { ComponentWeight } from './types/weight.js';
-export type { PositionY, PositionX } from './types/position.js';
-export type { IconPosition } from './types/special.js';
-/** developer tools: helpers: logger */
-export { default as createLogger } from './stories/developer tools/helpers/logger/logger.js';
-export type { LogLevel, LoggerOptions, } from './stories/developer tools/helpers/logger/logger.js';
-/** developer tools: helpers: Numbers: isValidNumberValue */
-export { default as isValidNumberValue } from './stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
-export type { IsValidNumberValueSettings } from './stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
-/** developer tools: helpers: Numbers: cleanNumericString */
-export { default as cleanNumericString } from './stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
-/** developer tools: helpers: Numbers: cleanNumericString */
-export { default as getMoment } from './stories/developer tools/helpers/Time/getMoment/getMoment.js';
-export type { GetMomentDate, GetMomentFormat, GetMomentSettings, } from './stories/developer tools/helpers/Time/getMoment/getMoment.js';
-/** developer tools: directives: clickOutside */
-export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
-/** developer tools: components: UtilityButton */
-export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
-export type { UtilityButtonProps } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
-/** developer tools: components: InputEnclosure */
-export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-export type { InputEnclosureProps } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-/** developer tools: components: DynamicInput */
-export { default as DynamicInput } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
-export type { DynamicInputVariant, DynamicInputProps, DynamicInputClickEvent, DynamicInputFocusEvent, DynamicInputKeyboardEvent, } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
-/** developer tools: components: Popper */
-export { default as Popper } from './stories/developer tools/components/Popper/Popper.svelte';
-export type { PopperProps } from './stories/developer tools/components/Popper/Popper.svelte';
-export { default as PopperPopup } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
-export type { PopperPopupProps } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
-/** Form: Button */
-export { default as Button } from './stories/components/Form/Button/Button.svelte';
-export type { ButtonLinkTarget, ButtonLinkReferrerpolicy, ButtonType, ButtonProps, ButtonClickEvent, } from './stories/components/Form/Button/Button.svelte';
-/** Form: TextInput */
-export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
-export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, TextInputInputEvent, TextInputKeyboardEvent, TextInputProps, } from './stories/components/Form/TextInput/TextInput.svelte';
-/** Form: PasswordInput */
-export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
-export type { PasswordInputToggleEvent, PasswordInputProps, } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
-/** Form: Label */
-export { default as Label } from './stories/components/Form/Label/Label.svelte';
-export type { LabelProps } from './stories/components/Form/Label/Label.svelte';
-/** Form: FormControl */
-export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
-export type { FormControlProps } from './stories/components/Form/FormControl/FormControl.svelte';
-/** Form: Message */
-export { default as Message } from './stories/components/Form/Message/Message.svelte';
-export type { MessageProps } from './stories/components/Form/Message/Message.svelte';
-/** Form: Select */
-export { default as Select } from './stories/components/Form/Select/Select.svelte';
-export type { SelectOption, SelectProps } from './stories/components/Form/Select/Select.svelte';
-/** Form: NumericInput */
-export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
-export type { NumericInputProps } from './stories/components/Form/NumericInput/NumericInput.svelte';
-/** Form: DatePicker */
-export { default as DatePicker } from './stories/components/Form/DatePicker/DatePicker.svelte';
-export type { DatePickerProps, DatePickerCalendarIconPosition, } from './stories/components/Form/DatePicker/DatePicker.svelte';
-/** Form: RangeSlider */
-export { default as RangeSlider } from './stories/components/Form/RangeSlider/RangeSlider.svelte';
-export type { RangeSliderProps } from './stories/components/Form/RangeSlider/RangeSlider.svelte';
-/** Form: Toggle */
-export { default as Toggle } from './stories/components/Form/Toggle/Toggle.svelte';
-export type { ToggleProps } from './stories/components/Form/Toggle/Toggle.svelte';
-/** Form: Checkbox */
-export { default as Checkbox } from './stories/components/Form/Checkbox/Checkbox.svelte';
-export type { CheckboxProps } from './stories/components/Form/Checkbox/Checkbox.svelte';
-/** Form: Radio */
-export { default as Radio } from './stories/components/Form/Radio/Radio.svelte';
-export type { RadioProps } from './stories/components/Form/Radio/Radio.svelte';
-/** Form: Search */
-export { default as Search } from './stories/components/Form/Search/Search.svelte';
-export type { SearchProps } from './stories/components/Form/Search/Search.svelte';
-/** Layout: Paper */
-export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
-export type { PaperColor, PaperProps } from './stories/components/Layout/Paper/Paper.svelte';
-/** Layout: Separator */
-export { default as Separator } from './stories/components/Layout/Separator/Separator.svelte';
-export type { SeparatorProps, SeparatorOrientation, } from './stories/components/Layout/Separator/Separator.svelte';
-/** Layout: Menu */
-export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
-export type { MenuProps } from './stories/components/Layout/Menu/Menu.svelte';
-export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
-export type { MenuItemType, MenuItemProps, } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
-export { default as DynamicMenu } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
-export type { DynamicMenuItemOption, DynamicMenuProps, } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
-/** Layout: Grid */
-export { default as Grid } from './stories/components/Layout/Grid/Grid.svelte';
-export type { GridProps } from './stories/components/Layout/Grid/Grid.svelte';
-export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte';
-export type { GridRowProps } from './stories/components/Layout/Grid/Row/Row.svelte';
-export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
-export type { GridColumnSize, GridColumnProps, } from './stories/components/Layout/Grid/Column/Column.svelte';
-/** Layout: Accordian */
-export { default as Accordian } from './stories/components/Layout/Accordian/Accordian.svelte';
-export type { AccordianProps, AccordianToggleEvent, } from './stories/components/Layout/Accordian/Accordian.svelte';
-/** Info: Calendar */
-export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
-export type { CalendarProps, CalendarActiveSection, } from './stories/components/Info/Calendar/Calendar.svelte';
-export { default as CalendarDatesChart } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
-export type { CalendarDatesChartProps } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
-export { default as CalendarDateChip } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
-export type { CalendarDateChipProps } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
-export { default as CalendarWeek, calendarWeekOptions, } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
-export type { CalendarWeekProps, CalendarWeekOption, CalendarWeekNames, CalendarWeekDayNameType, } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
-export type { CalendarControlsProps } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
-export { default as CalendarControls } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
-export type { CalendarMonthNames, CalendarMonthOption, calendarMonthNameType, CalendarMonthSelectorProps, } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
-export { default as CalendarMonthSelector, calendarMonthOptions, } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
-export type { CalendarYearSelectorProps } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
-export { default as CalendarYearSelector } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
-export type { CalendarNavigationProps } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
-export { default as CalendarNavigation } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
-export type { CalendarMonthListProps } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
-export { default as CalendarMonthList } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
-export type { CalendarMonthChipProps } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
-export { default as CalendarMonthChip } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
-export type { CalendarYearListProps } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
-export { default as CalendarYearList } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
-export type { CalendarYearChipProps } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
-export { default as CalendarYearChip } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
-export type { DateOfMonth } from './stories/components/Info/Calendar/utils/types.js';
-export { DAYS_OF_WEEK, MONTHS } from './stories/components/Info/Calendar/utils/types.js';
-export { default as getDatesOfMonth } from './stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.js';
-export { default as createDateOfMonth } from './stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js';
-export type { CreateDatesOfMonthSettings, CreateDateOfMonthType, } from './stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js';
+/**
+ * Button component and related prop types.
+ */
+export { Button } from './components/Form/index.js';
+export type { ButtonAsButtonProps, ButtonAsAnchorProps, ButtonProps, } from './components/Form/index.js';
+/**
+ * TextInput component and related types/events.
+ */
+export { TextInput } from './components/Form/index.js';
+export type { TextInputEvent, TextInputFocusEvent, TextInputProps, } from './components/Form/index.js';
+/**
+ * InputEnclosure component and related prop types.
+ */
+export { InputEnclosure } from './components/Form/index.js';
+export type { InputEnclosureProps } from './components/Form/index.js';

package/dist/index.js

@@ -1,77 +1,15 @@
-/** developer tools: helpers: logger */
-export { default as createLogger } from './stories/developer tools/helpers/logger/logger.js';
-/** developer tools: helpers: Numbers: isValidNumberValue */
-export { default as isValidNumberValue } from './stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
-/** developer tools: helpers: Numbers: cleanNumericString */
-export { default as cleanNumericString } from './stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
-/** developer tools: helpers: Numbers: cleanNumericString */
-export { default as getMoment } from './stories/developer tools/helpers/Time/getMoment/getMoment.js';
-/** developer tools: directives: clickOutside */
-export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
-/** developer tools: components: UtilityButton */
-export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
-/** developer tools: components: InputEnclosure */
-export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-/** developer tools: components: DynamicInput */
-export { default as DynamicInput } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
-/** developer tools: components: Popper */
-export { default as Popper } from './stories/developer tools/components/Popper/Popper.svelte';
-export { default as PopperPopup } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
-/** Form: Button */
-export { default as Button } from './stories/components/Form/Button/Button.svelte';
-/** Form: TextInput */
-export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
-/** Form: PasswordInput */
-export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
-/** Form: Label */
-export { default as Label } from './stories/components/Form/Label/Label.svelte';
-/** Form: FormControl */
-export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
-/** Form: Message */
-export { default as Message } from './stories/components/Form/Message/Message.svelte';
-/** Form: Select */
-export { default as Select } from './stories/components/Form/Select/Select.svelte';
-/** Form: NumericInput */
-export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
-/** Form: DatePicker */
-export { default as DatePicker } from './stories/components/Form/DatePicker/DatePicker.svelte';
-/** Form: RangeSlider */
-export { default as RangeSlider } from './stories/components/Form/RangeSlider/RangeSlider.svelte';
-/** Form: Toggle */
-export { default as Toggle } from './stories/components/Form/Toggle/Toggle.svelte';
-/** Form: Checkbox */
-export { default as Checkbox } from './stories/components/Form/Checkbox/Checkbox.svelte';
-/** Form: Radio */
-export { default as Radio } from './stories/components/Form/Radio/Radio.svelte';
-/** Form: Search */
-export { default as Search } from './stories/components/Form/Search/Search.svelte';
-/** Layout: Paper */
-export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
-/** Layout: Separator */
-export { default as Separator } from './stories/components/Layout/Separator/Separator.svelte';
-/** Layout: Menu */
-export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
-export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
-export { default as DynamicMenu } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
-/** Layout: Grid */
-export { default as Grid } from './stories/components/Layout/Grid/Grid.svelte';
-export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte';
-export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
-/** Layout: Accordian */
-export { default as Accordian } from './stories/components/Layout/Accordian/Accordian.svelte';
-/** Info: Calendar */
-export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
-export { default as CalendarDatesChart } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
-export { default as CalendarDateChip } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
-export { default as CalendarWeek, calendarWeekOptions, } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
-export { default as CalendarControls } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
-export { default as CalendarMonthSelector, calendarMonthOptions, } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
-export { default as CalendarYearSelector } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
-export { default as CalendarNavigation } from './stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
-export { default as CalendarMonthList } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
-export { default as CalendarMonthChip } from './stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
-export { default as CalendarYearList } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
-export { default as CalendarYearChip } from './stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
-export { DAYS_OF_WEEK, MONTHS } from './stories/components/Info/Calendar/utils/types.js';
-export { default as getDatesOfMonth } from './stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.js';
-export { default as createDateOfMonth } from './stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js';
+// =====================================================
+// Form Components – Public API
+// =====================================================
+/**
+ * Button component and related prop types.
+ */
+export { Button } from './components/Form/index.js';
+/**
+ * TextInput component and related types/events.
+ */
+export { TextInput } from './components/Form/index.js';
+/**
+ * InputEnclosure component and related prop types.
+ */
+export { InputEnclosure } from './components/Form/index.js';

package/dist/styles/scss/mixins/_button-color.scss

@@ -0,0 +1,140 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-button-scale-light: (
+  outline: 400,
+  text-bg: 100,
+  text-hover: 200,
+  text-active: 300,
+  solid-bg: 500,
+  solid-hover: 600,
+  solid-active: 700,
+);
+
+$dodo-ui-button-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-hover: (
+    100,
+    90%,
+    #fff,
+  ),
+  text-active: (
+    200,
+    90%,
+    #fff,
+  ),
+  solid-bg: 400,
+  solid-hover: 300,
+  solid-active: 200,
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-button-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-button-scale-dark;
+  } @else {
+    $scale: $dodo-ui-button-scale-light;
+  }
+
+  --dodo-ui-Button-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+
+  --dodo-ui-Button-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-hover)
+    )};
+  --dodo-ui-Button-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active)
+    )};
+
+  --dodo-ui-Button-solid-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-bg)
+    )};
+  --dodo-ui-Button-solid-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-hover)
+    )};
+  --dodo-ui-Button-solid-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-active)
+    )};
+}
+
+@mixin generate-dodo-ui-button-color($theme) {
+  &--#{$theme} {
+    &.variant {
+      &--text {
+        color: var(--dodo-color-#{$theme}-800);
+        background-color: var(--dodo-ui-Button-text-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-Button-text-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-Button-text-#{$theme}-active-bg);
+        }
+
+        &.outline {
+          border-color: var(--dodo-ui-Button-outline-#{$theme});
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-Button-solid-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.19.1",
+  "version": "1.0.0--beta-2",
   "scripts": {
     "copy-css": "cpy src/lib/styles/global.css dist/styles --parents",
     "build": "vite build && pnpm copy-css && pnpm run prepack",
@@ -49,54 +49,54 @@
     "./styles/global.css": "./dist/styles/global.css"
   },
   "peerDependencies": {
+    "bits-ui": "^2.0.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.1.0",
-    "@eslint/compat": "^1.3.2",
-    "@eslint/js": "^9.33.0",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-svelte-csf": "5.0.7",
-    "@storybook/addon-vitest": "^9.1.1",
-    "@storybook/sveltekit": "^9.1.1",
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.27.3",
-    "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.1",
+    "@chromatic-com/storybook": "5.0.1",
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^10.0.1",
+    "@iconify/svelte": "^5.2.1",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-svelte-csf": "5.0.10",
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/sveltekit": "^10.2.8",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/file-saver": "^2.0.7",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vueless/storybook-dark-mode": "^9.0.6",
-    "cpy-cli": "^5.0.0",
-    "eslint": "^9.33.0",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vueless/storybook-dark-mode": "^10.0.7",
+    "bits-ui": "^2.15.5",
+    "cpy-cli": "^7.0.0",
+    "dayjs": "^1.11.19",
+    "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "9.1.1",
-    "eslint-plugin-svelte": "^3.11.0",
+    "eslint-plugin-storybook": "10.2.8",
+    "eslint-plugin-svelte": "^3.14.0",
     "file-saver": "^2.0.5",
-    "globals": "^16.3.0",
-    "playwright": "^1.54.2",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.12",
-    "sass": "^1.90.0",
-    "storybook": "^9.1.1",
-    "svelte": "^5.38.0",
-    "svelte-check": "^4.3.1",
+    "globals": "^17.3.0",
+    "playwright": "^1.58.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.4.1",
+    "publint": "^0.3.17",
+    "sass": "^1.97.3",
+    "storybook": "^10.2.8",
+    "svelte": "^5.50.1",
+    "svelte-check": "^4.3.6",
     "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.0",
-    "vite": "^7.1.1",
-    "vitest": "^3.2.4"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.55.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "keywords": [
     "svelte"
   ],
   "volta": {
-    "node": "22.15.1",
-    "pnpm": "10.14.0"
-  },
-  "dependencies": {
-    "@iconify/svelte": "^5.0.1",
-    "dayjs": "^1.11.13"
+    "node": "24.13.0",
+    "pnpm": "10.28.2"
   }
 }

package/src/lib/Home.mdx

@@ -0,0 +1,59 @@
+import { Source } from '@storybook/addon-docs/blocks';
+import item from '../../package.json?raw';
+
+<main style={{ textAlign: 'center' }}>
+
+<img src="dodo-circle-6.png" style={{ width: 200, height: 'auto' }} />
+
+# Dodo UI
+
+<h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
+
+<h3 style={{ fontWeight: 400 }}>
+  An open-source, opinionated UI framework for Svelte. based on [Bits UI](https://bits-ui.com/)
+</h3>
+
+### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
+
+</main>
+
+<br />
+<br />
+
+## Install
+
+<Source
+  dark
+  language="bash"
+  code={`
+pnpm add bits-ui @flightlesslabs/dodo-ui
+`}
+/>
+
+We are using bits-ui@{JSON.parse(item).devDependencies['bits-ui']} internally
+
+## Add css
+
+Add global css in your `+layout.svelte` file
+
+<Source
+  dark
+  language="js"
+  code={`
+import '@flightlesslabs/dodo-ui/styles/global.css';
+`}
+/>
+
+## Use it!
+
+Lets import [Button](?path=/docs/components-form-button--docs) component. Checkout documentation for [Button](?path=/docs/components-form-button--docs)
+
+<Source
+  dark
+  language="js"
+  code={`
+import { Button } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+## Explore more

package/src/lib/attributes/color.ts

@@ -0,0 +1,19 @@
+/** Component Color */
+export const COMPONENT_COLOR = {
+  priority: ['primary', 'secondary', 'neutral'],
+  severity: ['safe', 'warning', 'danger'],
+} as const;
+
+export type ComponentColorPriority = (typeof COMPONENT_COLOR.priority)[number];
+export type ComponentColorSeverity = (typeof COMPONENT_COLOR.severity)[number];
+export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
+
+// Flat options (for Storybook, selects, etc.)
+export const componentColorOptions = [
+  ...COMPONENT_COLOR.priority,
+  ...COMPONENT_COLOR.severity,
+] as const satisfies readonly ComponentColor[];
+
+// Grouped options (no duplication)
+export const componentColorPriorityOptions = COMPONENT_COLOR.priority;
+export const componentColorSeverityOptions = COMPONENT_COLOR.severity;

package/src/lib/attributes/roundness.ts

@@ -0,0 +1,14 @@
+/** Component Roundness */
+export const COMPONENT_ROUNDNESS = {
+  numerical: [0, 1, 2, 3],
+  shape: [0, 1, 2, 3, 'pill'],
+  all: [0, 1, 2, 3, 'pill', 'full'],
+} as const;
+
+export type ComponentRoundnessNumerical = (typeof COMPONENT_ROUNDNESS.numerical)[number];
+export type ComponentRoundnessShape = (typeof COMPONENT_ROUNDNESS.shape)[number];
+export type ComponentRoundness = (typeof COMPONENT_ROUNDNESS.all)[number];
+
+export const componentRoundnessNumericalOptions = COMPONENT_ROUNDNESS.numerical;
+export const componenRoundnessShapeOptions = COMPONENT_ROUNDNESS.shape;
+export const componentRoundnessOptions = COMPONENT_ROUNDNESS.all;

package/src/lib/attributes/size.ts

@@ -0,0 +1,8 @@
+/** Component Size */
+export const COMPONENT_SIZE = {
+  all: ['normal', 'small', 'large'],
+} as const;
+
+export type ComponentSize = (typeof COMPONENT_SIZE.all)[number];
+
+export const componentSizeOptions = COMPONENT_SIZE.all;

package/src/lib/attributes/variant.ts

@@ -0,0 +1,8 @@
+/** Component Variant */
+export const COMPONENT_VARIANT = {
+  all: ['solid', 'text'],
+} as const;
+
+export type ComponentVariant = (typeof COMPONENT_VARIANT.all)[number];
+
+export const componentVariantOptions = COMPONENT_VARIANT.all;