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

package/README.md

@@ -2,7 +2,7 @@
 
 # Dodo Ui
 
-An open-source, opinionated UI framework for Svelte.
+Opinionated UI framework for Svelte, based on [Bits UI](https://bits-ui.com/)
 
 [Github](https://github.com/flightlesslabs/dodo-ui) | [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
 

package/dist/Home.mdx

@@ -10,7 +10,7 @@ import item from '../../package.json?raw';
 <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/)
+  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)
@@ -30,7 +30,7 @@ pnpm add bits-ui @flightlesslabs/dodo-ui
 `}
 />
 
-We are using bits-ui@{JSON.parse(item).devDependencies['bits-ui']} internally
+We are using **bits-ui@{JSON.parse(item).devDependencies['bits-ui']}** internally
 
 ## Add css
 
@@ -41,6 +41,7 @@ Add global css in your `+layout.svelte` file
   language="js"
   code={`
 import '@flightlesslabs/dodo-ui/styles/global.css';
+import '@flightlesslabs/dodo-ui/styles/components.css';
 `}
 />
 

package/dist/components/Form/Button/Button.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import './Button.scss';
-import { Button as BitsUiButton } from 'bits-ui';
+<script lang="ts">import { Button as BitsUiButton } from 'bits-ui';
 /**
  * Button component runtime props.
  *

package/dist/components/Form/Button/Button.svelte.d.ts

@@ -66,7 +66,6 @@ export type ButtonAsAnchorProps = ButtonBaseProps & Omit<HTMLAnchorAttributes, '
  * - When `href` is absent, button props are enabled and anchor-only props are disabled.
  */
 export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
-import './Button.scss';
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentColor } from '../../../attributes/color.js';
 import type { ComponentRoundness } from '../../../attributes/roundness.js';

package/dist/components/Form/InputEnclosure/InputEnclosure.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import './InputEnclosure.scss';
-import InputAffix from './InputAffix.svelte';
+<script lang="ts">import InputAffix from './InputAffix.svelte';
 /**
  * InputEnclosure component runtime props.
  *

package/dist/components/Form/InputEnclosure/InputEnclosure.svelte.d.ts

@@ -56,7 +56,6 @@ interface InputEnclosureBaseProps {
  * Inherits all native HTML div attributes (e.g. id, style, data-*, aria-*).
  */
 export type InputEnclosureProps = InputEnclosureBaseProps & HTMLAttributes<HTMLDivElement>;
-import './InputEnclosure.scss';
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
 declare const InputEnclosure: import("svelte").Component<InputEnclosureProps, {}, "ref">;

package/dist/components/Form/TextInput/TextInput.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">import './TextInput.scss';
-import InputEnclosure from '../InputEnclosure/InputEnclosure.svelte';
+<script lang="ts">import InputEnclosure from '../InputEnclosure/InputEnclosure.svelte';
 let { ref = $bindable(), size = 'normal', roundness = 1, outline = true, class: className = '', disabled = false, error = false, focused: forcedFocused = false, before, after, onfocus, onblur, ...restProps } = $props();
 /**
  * Local focus state used to drive InputEnclosure focus styling.

package/dist/components/Form/TextInput/TextInput.svelte.d.ts

@@ -59,7 +59,6 @@ interface TextInputBaseProps {
  * Inherits all native HTML input attributes (placeholder, value, name, etc.).
  */
 export type TextInputProps = TextInputBaseProps & Omit<HTMLInputAttributes, 'size' | 'children'>;
-import './TextInput.scss';
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
 declare const TextInput: import("svelte").Component<TextInputProps, {}, "ref">;

package/dist/index.d.ts

@@ -1,15 +1,28 @@
 /**
  * Button component and related prop types.
  */
-export { Button } from './components/Form/index.js';
-export type { ButtonAsButtonProps, ButtonAsAnchorProps, ButtonProps, } from './components/Form/index.js';
+export { default as Button, type ButtonAsButtonProps, type ButtonAsAnchorProps, type ButtonProps, } from './components/Form/Button/Button.svelte';
 /**
  * TextInput component and related types/events.
  */
-export { TextInput } from './components/Form/index.js';
-export type { TextInputEvent, TextInputFocusEvent, TextInputProps, } from './components/Form/index.js';
+export { default as TextInput, type TextInputEvent, type TextInputFocusEvent, type TextInputProps, } from './components/Form/TextInput/TextInput.svelte';
 /**
  * InputEnclosure component and related prop types.
  */
-export { InputEnclosure } from './components/Form/index.js';
-export type { InputEnclosureProps } from './components/Form/index.js';
+export { default as InputEnclosure, type InputEnclosureProps, } from './components/Form/InputEnclosure/InputEnclosure.svelte';
+/**
+ * color attribute related prop types.
+ */
+export { COMPONENT_COLOR, componentColorOptions, componentColorPriorityOptions, componentColorSeverityOptions, type ComponentColorPriority, type ComponentColorSeverity, type ComponentColor, } from './attributes/color.js';
+/**
+ * roundness attribute related prop types.
+ */
+export { COMPONENT_ROUNDNESS, componentRoundnessNumericalOptions, componenRoundnessShapeOptions, componentRoundnessOptions, type ComponentRoundnessNumerical, type ComponentRoundnessShape, type ComponentRoundness, } from './attributes/roundness.js';
+/**
+ * size attribute related prop types.
+ */
+export { COMPONENT_SIZE, componentSizeOptions, type ComponentSize } from './attributes/size.js';
+/**
+ * variant attribute related prop types.
+ */
+export { COMPONENT_VARIANT, componentVariantOptions, type ComponentVariant, } from './attributes/variant.js';

package/dist/index.js

@@ -4,12 +4,31 @@
 /**
  * Button component and related prop types.
  */
-export { Button } from './components/Form/index.js';
+export { default as Button, } from './components/Form/Button/Button.svelte';
 /**
  * TextInput component and related types/events.
  */
-export { TextInput } from './components/Form/index.js';
+export { default as TextInput, } from './components/Form/TextInput/TextInput.svelte';
 /**
  * InputEnclosure component and related prop types.
  */
-export { InputEnclosure } from './components/Form/index.js';
+export { default as InputEnclosure, } from './components/Form/InputEnclosure/InputEnclosure.svelte';
+// =====================================================
+// attributes – Public API
+// =====================================================
+/**
+ * color attribute related prop types.
+ */
+export { COMPONENT_COLOR, componentColorOptions, componentColorPriorityOptions, componentColorSeverityOptions, } from './attributes/color.js';
+/**
+ * roundness attribute related prop types.
+ */
+export { COMPONENT_ROUNDNESS, componentRoundnessNumericalOptions, componenRoundnessShapeOptions, componentRoundnessOptions, } from './attributes/roundness.js';
+/**
+ * size attribute related prop types.
+ */
+export { COMPONENT_SIZE, componentSizeOptions } from './attributes/size.js';
+/**
+ * variant attribute related prop types.
+ */
+export { COMPONENT_VARIANT, componentVariantOptions, } from './attributes/variant.js';

package/dist/styles/components.scss

@@ -0,0 +1,3 @@
+@use '../components/Form/Button/Button.scss';
+@use '../components/Form/InputEnclosure/InputEnclosure.scss';
+@use '../components/Form/TextInput/TextInput.scss';

package/dist/styles/global/index.scss

@@ -0,0 +1,7 @@
+@forward '_minimal-reset.scss';
+@forward '_colors-base.scss';
+@forward '_colors.scss';
+@forward '_space.scss';
+@forward '_z-index.scss';
+@forward '_shadow.scss';
+@forward '_components.scss';

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "1.0.0--beta-2",
+  "version": "1.0.0--beta-3",
   "scripts": {
-    "copy-css": "cpy src/lib/styles/global.css dist/styles --parents",
-    "build": "vite build && pnpm copy-css && pnpm run prepack",
+    "scss:global": "sass src/lib/styles/global/index.scss dist/styles/global.css",
+    "scss:components": "sass src/lib/styles/components.scss dist/styles/components.css",
+    "scss": "pnpm scss:global && pnpm scss:components",
+    "build": "vite build && pnpm run prepack && pnpm run scss",
     "preview": "vite preview",
     "prepare": "svelte-kit sync || echo ''",
     "prepack": "svelte-kit sync && svelte-package && publint",
@@ -43,11 +45,11 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "scss": "./dist/styles/scss/index.scss"
-    },
-    "./styles/global.css": "./dist/styles/global.css"
+      "svelte": "./dist/index.js"
+    }
   },
+  "./styles/global.css": "./dist/styles/global.css",
+  "./styles/components.css": "./dist/styles/components.css",
   "peerDependencies": {
     "bits-ui": "^2.0.0",
     "svelte": "^5.0.0"
@@ -70,7 +72,6 @@
     "@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",

package/src/lib/Home.mdx

@@ -10,7 +10,7 @@ import item from '../../package.json?raw';
 <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/)
+  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)
@@ -30,7 +30,7 @@ pnpm add bits-ui @flightlesslabs/dodo-ui
 `}
 />
 
-We are using bits-ui@{JSON.parse(item).devDependencies['bits-ui']} internally
+We are using **bits-ui@{JSON.parse(item).devDependencies['bits-ui']}** internally
 
 ## Add css
 
@@ -41,6 +41,7 @@ Add global css in your `+layout.svelte` file
   language="js"
   code={`
 import '@flightlesslabs/dodo-ui/styles/global.css';
+import '@flightlesslabs/dodo-ui/styles/components.css';
 `}
 />
 

package/src/lib/components/Form/Button/Button.svelte

@@ -89,7 +89,6 @@
 </script>
 
 <script lang="ts">
-  import './Button.scss';
   import { Button as BitsUiButton } from 'bits-ui';
   import type { ComponentSize } from '$lib/attributes/size.js';
   import type { ComponentColor } from '$lib/attributes/color.js';

package/src/lib/components/Form/InputEnclosure/InputEnclosure.svelte

@@ -72,7 +72,6 @@
 </script>
 
 <script lang="ts">
-  import './InputEnclosure.scss';
   import type { ComponentSize } from '$lib/attributes/size.js';
   import type { ComponentRoundnessShape } from '$lib/attributes/roundness.js';
   import InputAffix from './InputAffix.svelte';

package/src/lib/components/Form/TextInput/TextInput.svelte

@@ -77,7 +77,6 @@
 </script>
 
 <script lang="ts">
-  import './TextInput.scss';
   import type { ComponentSize } from '$lib/attributes/size.js';
   import type { ComponentRoundnessShape } from '$lib/attributes/roundness.js';
   import InputEnclosure from '../InputEnclosure/InputEnclosure.svelte';

package/src/lib/index.ts

@@ -5,28 +5,71 @@
 /**
  * Button component and related prop types.
  */
-export { Button } from './components/Form/index.js';
-
-export type {
-  ButtonAsButtonProps,
-  ButtonAsAnchorProps,
-  ButtonProps,
-} from './components/Form/index.js';
+export {
+  default as Button,
+  type ButtonAsButtonProps,
+  type ButtonAsAnchorProps,
+  type ButtonProps,
+} from './components/Form/Button/Button.svelte';
 
 /**
  * TextInput component and related types/events.
  */
-export { TextInput } from './components/Form/index.js';
-
-export type {
-  TextInputEvent,
-  TextInputFocusEvent,
-  TextInputProps,
-} from './components/Form/index.js';
+export {
+  default as TextInput,
+  type TextInputEvent,
+  type TextInputFocusEvent,
+  type TextInputProps,
+} from './components/Form/TextInput/TextInput.svelte';
 
 /**
  * InputEnclosure component and related prop types.
  */
-export { InputEnclosure } from './components/Form/index.js';
+export {
+  default as InputEnclosure,
+  type InputEnclosureProps,
+} from './components/Form/InputEnclosure/InputEnclosure.svelte';
+
+// =====================================================
+// attributes – Public API
+// =====================================================
+
+/**
+ * color attribute related prop types.
+ */
+export {
+  COMPONENT_COLOR,
+  componentColorOptions,
+  componentColorPriorityOptions,
+  componentColorSeverityOptions,
+  type ComponentColorPriority,
+  type ComponentColorSeverity,
+  type ComponentColor,
+} from './attributes/color.js';
 
-export type { InputEnclosureProps } from './components/Form/index.js';
+/**
+ * roundness attribute related prop types.
+ */
+export {
+  COMPONENT_ROUNDNESS,
+  componentRoundnessNumericalOptions,
+  componenRoundnessShapeOptions,
+  componentRoundnessOptions,
+  type ComponentRoundnessNumerical,
+  type ComponentRoundnessShape,
+  type ComponentRoundness,
+} from './attributes/roundness.js';
+
+/**
+ * size attribute related prop types.
+ */
+export { COMPONENT_SIZE, componentSizeOptions, type ComponentSize } from './attributes/size.js';
+
+/**
+ * variant attribute related prop types.
+ */
+export {
+  COMPONENT_VARIANT,
+  componentVariantOptions,
+  type ComponentVariant,
+} from './attributes/variant.js';

package/src/lib/styles/components.scss

@@ -0,0 +1,3 @@
+@use '../components/Form/Button/Button.scss';
+@use '../components/Form/InputEnclosure/InputEnclosure.scss';
+@use '../components/Form/TextInput/TextInput.scss';

package/src/lib/styles/global/index.scss

@@ -0,0 +1,7 @@
+@forward '_minimal-reset.scss';
+@forward '_colors-base.scss';
+@forward '_colors.scss';
+@forward '_space.scss';
+@forward '_z-index.scss';
+@forward '_shadow.scss';
+@forward '_components.scss';

package/dist/components/Form/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Button, type ButtonAsButtonProps, type ButtonAsAnchorProps, type ButtonProps, } from './Button/Button.svelte';
-export { default as TextInput, type TextInputEvent, type TextInputFocusEvent, type TextInputProps, } from './TextInput/TextInput.svelte';
-export { default as InputEnclosure, type InputEnclosureProps, } from './InputEnclosure/InputEnclosure.svelte';

package/dist/components/Form/index.js

@@ -1,3 +0,0 @@
-export { default as Button, } from './Button/Button.svelte';
-export { default as TextInput, } from './TextInput/TextInput.svelte';
-export { default as InputEnclosure, } from './InputEnclosure/InputEnclosure.svelte';

package/dist/styles/global.css

@@ -1,7 +0,0 @@
-@import '_minimal-reset.css';
-@import '_colors-base.css';
-@import '_colors.css';
-@import '_space.css';
-@import '_z-index.css';
-@import '_shadow.css';
-@import '_components.css';

package/dist/styles/scss/index.scss

@@ -1 +0,0 @@
-@forward 'breakpoints';

package/src/lib/components/Form/index.ts

@@ -1,18 +0,0 @@
-export {
-  default as Button,
-  type ButtonAsButtonProps,
-  type ButtonAsAnchorProps,
-  type ButtonProps,
-} from './Button/Button.svelte';
-
-export {
-  default as TextInput,
-  type TextInputEvent,
-  type TextInputFocusEvent,
-  type TextInputProps,
-} from './TextInput/TextInput.svelte';
-
-export {
-  default as InputEnclosure,
-  type InputEnclosureProps,
-} from './InputEnclosure/InputEnclosure.svelte';

package/src/lib/styles/global.css

@@ -1,7 +0,0 @@
-@import '_minimal-reset.css';
-@import '_colors-base.css';
-@import '_colors.css';
-@import '_space.css';
-@import '_z-index.css';
-@import '_shadow.css';
-@import '_components.css';

package/src/lib/styles/scss/index.scss

@@ -1 +0,0 @@
-@forward 'breakpoints';