@brightspot/ui 0.0.0-alpha.2 → 1.0.0-alpha.1

package/dist/storybook/stories-Badge-stories.52b61cf3.iframe.bundle.js

@@ -0,0 +1,8 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[544],{"./src/stories/Badge.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Badge_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Badge_stories={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"btu-badge"},controls:{expanded:!0}},render:args=>(({color="gray",affordance,size="sm",label})=>{let dot=!1,icon=!1;return"dot"===affordance?dot=!0:"icon"===affordance&&(icon=!0),lit.qy`
+    <div
+      class=${["btu-badge",`btu-badge-${size}`,`btu-badge-${color}`,dot?"before:size-2 before:rounded-lg before:bg-[currentColor]":"",icon?"before:btu-icon before:btu-icon-xs before:btu-icon-salad":""].join(" ")}
+    >
+      ${label}
+    </div>
+  `})(args),argTypes:{color:{control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"]},affordance:{control:{type:"select"},options:["dot","icon"],description:"Display a design affordance next to the label"},size:{control:{type:"select"},options:["sm","md","lg"]}},args:{color:"purple",affordance:"dot",size:"sm",label:"Badge"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Badge-stories.52b61cf3.iframe.bundle.js.map

package/dist/storybook/stories-Badge-stories.52b61cf3.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Badge-stories.52b61cf3.iframe.bundle.js","mappings":";;AA0BA;;AAQA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Badge.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { ThemeColors } from '../tailwind-plugin-theme'\n\nexport interface BadgeProps {\n  color?: ThemeColors\n  affordance?: 'dot' | 'icon'\n  size?: 'sm' | 'md' | 'lg'\n  label: string\n}\n\nexport const Badge = ({\n  color = 'gray',\n  affordance,\n  size = 'sm',\n  label,\n}: BadgeProps) => {\n  let dot = false\n  let icon = false\n  if (affordance === 'dot') {\n    dot = true\n  } else if (affordance === 'icon') {\n    icon = true\n  }\n\n  return html`\n    <div\n      class=${[\n        'btu-badge',\n        `btu-badge-${size}`,\n        `btu-badge-${color}`,\n        dot ? 'before:size-2 before:rounded-lg before:bg-[currentColor]' : '',\n        icon ? 'before:btu-icon before:btu-icon-xs before:btu-icon-salad' : '',\n      ].join(' ')}\n    >\n      ${label}\n    </div>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Button-stories.5286bed3.iframe.bundle.js

@@ -0,0 +1,9 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[791],{"./src/stories/Button.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Button_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Button_stories={title:"Components/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button"},controls:{expanded:!0}},render:args=>(({color="primary",pressed,fill,contained,outlined,size="sm",label})=>{const depressed=pressed?"btu-button-pressed":"",filled=fill?"btu-button-fill":"btu-button-fill-none",container=contained?"":"btu-button-container-none",outline=outlined?"btu-button-outline":"";return lit.qy`
+    <button
+      type="button"
+      class=${["btu-button",`btu-button-${color}`,`btu-button-${size}`,filled,container,outline,depressed].join(" ")}
+    >
+      ${label}
+    </button>
+  `})(args),argTypes:{size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]},color:{control:{type:"select"},options:["primary","gray","error"]},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},contained:{control:{type:"boolean"},description:"Does the button have a container?"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"}},args:{color:"primary",label:"Button",pressed:!1,fill:!0,contained:!0,outlined:!1,size:"md"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Button-stories.5286bed3.iframe.bundle.js.map

package/dist/storybook/stories-Button-stories.5286bed3.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Button-stories.5286bed3.iframe.bundle.js","mappings":";;;AAkCA;;AAUA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Button.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport interface ButtonProps {\n  color?: 'primary' | 'gray' | 'error'\n  /** Is the button depressed or not? */\n  pressed?: boolean\n  /** Should the button have a background? */\n  fill?: boolean\n  /** Should the button have a container? */\n  contained?: boolean\n  /** Should the button be outlined? */\n  outlined?: boolean\n  /** How large should the button be? */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  label: string\n}\n\nexport const Button = ({\n  color = 'primary',\n  pressed,\n  fill,\n  contained,\n  outlined,\n  size = 'sm',\n  label,\n}: ButtonProps) => {\n  const depressed = pressed ? 'btu-button-pressed' : ''\n  const filled = fill ? 'btu-button-fill' : 'btu-button-fill-none'\n  const container = contained ? '' : 'btu-button-container-none'\n  const outline = outlined ? 'btu-button-outline' : ''\n\n  return html`\n    <button\n      type=\"button\"\n      class=${[\n        'btu-button',\n        `btu-button-${color}`,\n        `btu-button-${size}`,\n        filled,\n        container,\n        outline,\n        depressed,\n      ].join(' ')}\n    >\n      ${label}\n    </button>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Colors-stories.324d20d0.iframe.bundle.js

@@ -0,0 +1,31 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[471],{"./src/stories/Colors.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Error:()=>Error,Gray:()=>Gray,Primary:()=>Primary,Success:()=>Success,Warning:()=>Warning,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Colors_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Colors_stories={title:"Design System/Colors",component:"btu-theme",tags:["autodocs"],parameters:{controls:{exclude:["palette"]},docs:{subtitle:"We've replaced the default Tailwind colors with our own palette to match the design vocabulary. Specifically replacing 'blue' with 'primary', 'green' with 'success', 'yellow' with 'warning', and 'red' with 'error'. For example, instead of 'bg-blue-400', use 'bg-primary-400'."}},render:args=>(args=>lit.qy`
+    <div class="my-10">
+      <div
+        class="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4"
+      >
+        <div class="z-9 sticky top-28 bg-white lg:top-14 dark:bg-gray-950">
+          &nbsp;
+        </div>
+        <div
+          class="z-9 top-28 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-gray-950 dark:text-white"
+        >
+          <div>25</div>
+          <div>50</div>
+          <div>100</div>
+          <div>200</div>
+          <div>300</div>
+          <div>400</div>
+          <div>500</div>
+          <div>600</div>
+          <div>700</div>
+          <div>800</div>
+          <div>900</div>
+        </div>
+        <div></div>
+        <div class="grid h-10 grid-cols-11 gap-1.5 sm:gap-4">
+          ${args.palette?.map((color=>lit.qy`<div class="${color} size-full"></div>`))}
+        </div>
+      </div>
+    </div>
+  `)(args)},Primary={parameters:{docs:{description:{story:"Used for primary call to actions, visual UI elements, active and clicked states, and focused containers."}}},args:{palette:["bg-primary-25","bg-primary-50","bg-primary-100","bg-primary-200","bg-primary-300","bg-primary-400","bg-primary-500","bg-primary-600","bg-primary-700","bg-primary-800","bg-primary-900"]}},Success={parameters:{docs:{description:{story:"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green."}}},args:{palette:["bg-success-25","bg-success-50","bg-success-100","bg-success-200","bg-success-300","bg-success-400","bg-success-500","bg-success-600","bg-success-700","bg-success-800","bg-success-900"]}},Warning={parameters:{docs:{description:{story:'Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users\' attention.'}}},args:{palette:["bg-warning-25","bg-warning-50","bg-warning-100","bg-warning-200","bg-warning-300","bg-warning-400","bg-warning-500","bg-warning-600","bg-warning-700","bg-warning-800","bg-warning-900"]}},Error={parameters:{docs:{description:{story:'Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'}}},args:{palette:["bg-error-25","bg-error-50","bg-error-100","bg-error-200","bg-error-300","bg-error-400","bg-error-500","bg-error-600","bg-error-700","bg-error-800","bg-error-900"]}},Gray={parameters:{docs:{description:{story:"Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray."}}},args:{palette:["bg-gray-25","bg-gray-50","bg-gray-100","bg-gray-200","bg-gray-300","bg-gray-400","bg-gray-500","bg-gray-600","bg-gray-700","bg-gray-800","bg-gray-900"]}},__namedExportsOrder=["Primary","Success","Warning","Error","Gray"];Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-primary-25', 'bg-primary-50', 'bg-primary-100', 'bg-primary-200', 'bg-primary-300', 'bg-primary-400', 'bg-primary-500', 'bg-primary-600', 'bg-primary-700', 'bg-primary-800', 'bg-primary-900']\n  }\n}",...Primary.parameters?.docs?.source}}},Success.parameters={...Success.parameters,docs:{...Success.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: \"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.\"\n      }\n    }\n  },\n  args: {\n    palette: ['bg-success-25', 'bg-success-50', 'bg-success-100', 'bg-success-200', 'bg-success-300', 'bg-success-400', 'bg-success-500', 'bg-success-600', 'bg-success-700', 'bg-success-800', 'bg-success-900']\n  }\n}",...Success.parameters?.docs?.source}}},Warning.parameters={...Warning.parameters,docs:{...Warning.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Warning colors can communicate that an action is potentially destructive or \"on-hold\". These colors are commonly used in confirmations to grab the users\\' attention.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-warning-25', 'bg-warning-50', 'bg-warning-100', 'bg-warning-200', 'bg-warning-300', 'bg-warning-400', 'bg-warning-500', 'bg-warning-600', 'bg-warning-700', 'bg-warning-800', 'bg-warning-900']\n  }\n}",...Warning.parameters?.docs?.source}}},Error.parameters={...Error.parameters,docs:{...Error.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Error colors are used across error states and in \"destructive\" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-error-25', 'bg-error-50', 'bg-error-100', 'bg-error-200', 'bg-error-300', 'bg-error-400', 'bg-error-500', 'bg-error-600', 'bg-error-700', 'bg-error-800', 'bg-error-900']\n  }\n}",...Error.parameters?.docs?.source}}},Gray.parameters={...Gray.parameters,docs:{...Gray.parameters?.docs,source:{originalSource:"{\n  parameters: {\n    docs: {\n      description: {\n        story: 'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.'\n      }\n    }\n  },\n  args: {\n    palette: ['bg-gray-25', 'bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300', 'bg-gray-400', 'bg-gray-500', 'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900']\n  }\n}",...Gray.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Colors-stories.324d20d0.iframe.bundle.js.map

package/dist/storybook/stories-Colors-stories.324d20d0.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Colors-stories.324d20d0.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;;;;ACdA","sources":["webpack://@brightspot/ui/./src/stories/Colors.ts","webpack://@brightspot/ui/./src/stories/Colors.stories.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport const Colors = (args: ColorProps) => {\n  return html`\n    <div class=\"my-10\">\n      <div\n        class=\"not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4\"\n      >\n        <div class=\"z-9 sticky top-28 bg-white lg:top-14 dark:bg-gray-950\">\n          &nbsp;\n        </div>\n        <div\n          class=\"z-9 top-28 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-gray-950 dark:text-white\"\n        >\n          <div>25</div>\n          <div>50</div>\n          <div>100</div>\n          <div>200</div>\n          <div>300</div>\n          <div>400</div>\n          <div>500</div>\n          <div>600</div>\n          <div>700</div>\n          <div>800</div>\n          <div>900</div>\n        </div>\n        <div></div>\n        <div class=\"grid h-10 grid-cols-11 gap-1.5 sm:gap-4\">\n          ${args.palette?.map(\n            (color) => html`<div class=\"${color} size-full\"></div>`,\n          )}\n        </div>\n      </div>\n    </div>\n  `\n}\n\nexport interface ColorProps {\n  palette?: Array<\n    | 'bg-primary-25'\n    | 'bg-primary-50'\n    | 'bg-primary-100'\n    | 'bg-primary-200'\n    | 'bg-primary-300'\n    | 'bg-primary-400'\n    | 'bg-primary-500'\n    | 'bg-primary-600'\n    | 'bg-primary-700'\n    | 'bg-primary-800'\n    | 'bg-primary-900'\n    | 'bg-success-25'\n    | 'bg-success-50'\n    | 'bg-success-100'\n    | 'bg-success-200'\n    | 'bg-success-300'\n    | 'bg-success-400'\n    | 'bg-success-500'\n    | 'bg-success-600'\n    | 'bg-success-700'\n    | 'bg-success-800'\n    | 'bg-success-900'\n    | 'bg-warning-25'\n    | 'bg-warning-50'\n    | 'bg-warning-100'\n    | 'bg-warning-200'\n    | 'bg-warning-300'\n    | 'bg-warning-400'\n    | 'bg-warning-500'\n    | 'bg-warning-600'\n    | 'bg-warning-700'\n    | 'bg-warning-800'\n    | 'bg-warning-900'\n    | 'bg-error-25'\n    | 'bg-error-50'\n    | 'bg-error-100'\n    | 'bg-error-200'\n    | 'bg-error-300'\n    | 'bg-error-400'\n    | 'bg-error-500'\n    | 'bg-error-600'\n    | 'bg-error-700'\n    | 'bg-error-800'\n    | 'bg-error-900'\n    | 'bg-gray-25'\n    | 'bg-gray-50'\n    | 'bg-gray-100'\n    | 'bg-gray-200'\n    | 'bg-gray-300'\n    | 'bg-gray-400'\n    | 'bg-gray-500'\n    | 'bg-gray-600'\n    | 'bg-gray-700'\n    | 'bg-gray-800'\n    | 'bg-gray-900'\n  >\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { Colors } from './Colors'\nimport type { ColorProps } from './Colors'\n\nconst meta: Meta<ColorProps> = {\n  title: 'Design System/Colors',\n  component: 'btu-theme',\n  tags: ['autodocs'],\n  parameters: {\n    controls: { exclude: ['palette'] },\n    docs: {\n      subtitle: `We've replaced the default Tailwind colors with our own palette to match the design vocabulary. Specifically replacing 'blue' with 'primary', 'green' with 'success', 'yellow' with 'warning', and 'red' with 'error'. For example, instead of 'bg-blue-400', use 'bg-primary-400'.`,\n    },\n  },\n  render: (args) => Colors(args),\n}\n\nexport default meta\n\ntype Story = StoryObj<ColorProps>\n\nexport const Primary: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-primary-25',\n      'bg-primary-50',\n      'bg-primary-100',\n      'bg-primary-200',\n      'bg-primary-300',\n      'bg-primary-400',\n      'bg-primary-500',\n      'bg-primary-600',\n      'bg-primary-700',\n      'bg-primary-800',\n      'bg-primary-900',\n    ],\n  },\n}\nexport const Success: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.\",\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-success-25',\n      'bg-success-50',\n      'bg-success-100',\n      'bg-success-200',\n      'bg-success-300',\n      'bg-success-400',\n      'bg-success-500',\n      'bg-success-600',\n      'bg-success-700',\n      'bg-success-800',\n      'bg-success-900',\n    ],\n  },\n}\nexport const Warning: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Warning colors can communicate that an action is potentially destructive or \"on-hold\". These colors are commonly used in confirmations to grab the users\\' attention.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-warning-25',\n      'bg-warning-50',\n      'bg-warning-100',\n      'bg-warning-200',\n      'bg-warning-300',\n      'bg-warning-400',\n      'bg-warning-500',\n      'bg-warning-600',\n      'bg-warning-700',\n      'bg-warning-800',\n      'bg-warning-900',\n    ],\n  },\n}\nexport const Error: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Error colors are used across error states and in \"destructive\" actions. They communicate a destructive/negative action, such as deleting or archiving an object.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-error-25',\n      'bg-error-50',\n      'bg-error-100',\n      'bg-error-200',\n      'bg-error-300',\n      'bg-error-400',\n      'bg-error-500',\n      'bg-error-600',\n      'bg-error-700',\n      'bg-error-800',\n      'bg-error-900',\n    ],\n  },\n}\nexport const Gray: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.',\n      },\n    },\n  },\n  args: {\n    palette: [\n      'bg-gray-25',\n      'bg-gray-50',\n      'bg-gray-100',\n      'bg-gray-200',\n      'bg-gray-300',\n      'bg-gray-400',\n      'bg-gray-500',\n      'bg-gray-600',\n      'bg-gray-700',\n      'bg-gray-800',\n      'bg-gray-900',\n    ],\n  },\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Heading-stories.b41961f8.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[123],{"./src/stories/Heading.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Heading_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Heading_stories={title:"Components/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"btu-heading"},controls:{expanded:!0}},render:args=>(({size})=>lit.qy` <div class=${[`btu-heading-${size}`].join(" ")}>Heading</div> `)(args),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);

package/dist/storybook/stories-Loader-stories.cd5e8fb5.iframe.bundle.js

@@ -0,0 +1,6 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[894],{"./src/stories/Loader.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Loader_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const Loader_stories={title:"Components/Loader",component:"btu-loader",tags:["autodocs"],parameters:{docs:{subtitle:'To avoid changing the markup, btu-loaders work by assigning the "--tw-content" property of a pseudo element the SVG data as a URI for it\'s background image. Loaders come with light & dark styles and are extrinsically sized. If you need to reference the default loader size for your container, you can do so with: var(--Loader-size)'},controls:{expanded:!0}},render:args=>lit.qy`
+    <div
+      class=${["before:btu-loader","before:size-[--Loader-size]"].join(" ")}
+    ></div>
+  `,argTypes:{},args:{}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Loader-stories.cd5e8fb5.iframe.bundle.js.map

package/dist/storybook/stories-Loader-stories.cd5e8fb5.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Loader-stories.cd5e8fb5.iframe.bundle.js","mappings":";;AAKA;;ACSA","sources":["webpack://@brightspot/ui/./src/stories/Loader.ts","webpack://@brightspot/ui/./src/stories/Loader.stories.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport const Loader = () => {\n  return html`\n    <div\n      class=${[`before:btu-loader`, 'before:size-[--Loader-size]'].join(' ')}\n    ></div>\n  `\n}\n","import type { Meta, StoryObj } from '@storybook/web-components'\nimport { Loader } from './Loader'\n\nconst meta: Meta = {\n  title: 'Components/Loader',\n  component: 'btu-loader',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      subtitle: `To avoid changing the markup, btu-loaders work by assigning the \"--tw-content\" property of a pseudo element the SVG data as a URI for it's background image. Loaders come with light & dark styles and are extrinsically sized. If you need to reference the default loader size for your container, you can do so with: var(--Loader-size)`,\n    },\n    controls: { expanded: true },\n  },\n  render: (args) => Loader(),\n  argTypes: {},\n  args: {},\n}\nexport default meta\n\ntype Story = StoryObj\nexport const Default: Story = {\n  args: {},\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js

@@ -0,0 +1,16 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[264],{"./src/stories/ScrollShadow.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>ScrollShadow_stories});var lit=__webpack_require__("./node_modules/lit/index.js");const ScrollShadow_stories={title:"Components/ScrollShadow",component:"btu-scrollshadow",tags:["autodocs"],parameters:{docs:{subtitle:"This plugin adds shadows to the edges of a scrollable container once the content overflows. The shadows use our gray color palette. You can choose which shade of gray you want. The scroll container must not already use before & after pseudo elements. But, if you need to use before/after modifiers on the container, make sure you also manually set the content property to the `--whitespace` variable. This is a workaround for TWCSS automatically adding a content property to the before/after pseudo-elements, which overrides the `--whitespace` variable by default. Note: this currently only supports x-axis scrolling."},controls:{expanded:!0}},render:args=>(({theme="btu-scrollshadow-25"})=>{const items=new Array(100).fill(0).map(((_,i)=>`Item ${i+1}`));return lit.qy`
+    <style>
+      :root {
+        --can-scroll:   ;
+      }
+    </style>
+    <div class=${["flex","gap-2","bg-gray-500",theme].join(" ")}>
+      ${items.map(((i,idx)=>lit.qy`<div
+            class="text-md flex aspect-square h-[100px] items-center justify-center"
+            style="background:oklch(80% 50% ${Math.floor(710*Math.random())+10});"
+          >
+            ${i}
+          </div>`))}
+    </div>
+  `})(args),argTypes:{theme:{control:{type:"select"},description:"Choose a shade of gray for the scroll shadow. 25 is almost white, and 900 is almost black.",options:["btu-scrollshadow-25","btu-scrollshadow-50","btu-scrollshadow-100","btu-scrollshadow-200","btu-scrollshadow-300","btu-scrollshadow-400","btu-scrollshadow-500","btu-scrollshadow-600","btu-scrollshadow-700","btu-scrollshadow-800","btu-scrollshadow-900"]}},args:{}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js.map

package/dist/storybook/stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-ScrollShadow-stories.252ec9e7.iframe.bundle.js","mappings":";;;;;;AA4BA;AACA;;AAIA;;AAIA;;;AAIA","sources":["webpack://@brightspot/ui/./src/stories/ScrollShadow.ts"],"sourcesContent":["import { html } from 'lit'\n\nexport interface ScrollShadowProps {\n  theme?:\n    | 'btu-scrollshadow-25'\n    | 'btu-scrollshadow-50'\n    | 'btu-scrollshadow-100'\n    | 'btu-scrollshadow-200'\n    | 'btu-scrollshadow-300'\n    | 'btu-scrollshadow-400'\n    | 'btu-scrollshadow-500'\n    | 'btu-scrollshadow-600'\n    | 'btu-scrollshadow-700'\n    | 'btu-scrollshadow-800'\n    | 'btu-scrollshadow-900'\n}\n\nexport const ScrollShadow = ({\n  theme = 'btu-scrollshadow-25',\n}: ScrollShadowProps) => {\n  const items = new Array(100).fill(0).map((_, i) => `Item ${i + 1}`)\n\n  return html`\n    <style>\n      :root {\n        --can-scroll:   ;\n      }\n    </style>\n    <div class=${['flex', 'gap-2', 'bg-gray-500', theme].join(' ')}>\n      ${items.map(\n        (i, idx) =>\n          html`<div\n            class=\"text-md flex aspect-square h-[100px] items-center justify-center\"\n            style=\"background:oklch(80% 50% ${Math.floor(\n              Math.random() * (720 - 10),\n            ) + 10});\"\n          >\n            ${i}\n          </div>`,\n      )}\n    </div>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/tailwind-plugin-badge.js

@@ -30,12 +30,15 @@ module.exports = plugin(function ({ addComponents, theme, e }) {
             if (fontSize) {
                 badgeSizes.push({
                     [`${className}-${e(key)}`]: {
+                        alignItems: 'center',
                         gap: '0.38rem',
                         ...fontSizeStyles,
                         fontSize: fontSize[0],
                         lineHeight: fontSize[1],
                         padding: `${size.paddingTop} ${size.paddingRight}`,
                         minWidth: size.minWidth,
+                        maxWidth: 'max-content',
+                        display: 'flex',
                     },
                 });
             }

package/dist/tailwind-plugin-badge.ts

@@ -63,12 +63,15 @@ module.exports = plugin(
         if (fontSize) {
           badgeSizes.push({
             [`${className}-${e(key)}`]: {
+              alignItems: 'center',
               gap: '0.38rem',
               ...fontSizeStyles,
               fontSize: fontSize[0],
               lineHeight: fontSize[1],
               padding: `${size.paddingTop} ${size.paddingRight}`,
               minWidth: size.minWidth,
+              maxWidth: 'max-content',
+              display: 'flex',
             },
           })
         }

package/dist/tailwind-plugin-scroll-shadow.js

@@ -1,8 +1,8 @@
 import plugin from 'tailwindcss/plugin';
 /**
  * This plugin adds shadows to the edges of a scrollable container when the content
- * of the container is overflowing.
- * You can choose a light or dark shadow.
+ * of the container overflows.
+ * The shadows use our gray color palette. You can choose which shade of gray you want.
  * Your container must not already use before & after pseudo elements.
  * If you use TWCSS before/after modifiers on this element, make sure you also manually
  * set the content property to the `--whitespace` variable. This is a workaround for TWCSS
@@ -10,21 +10,22 @@ import plugin from 'tailwindcss/plugin';
  * overrides the `--whitespace` variable by default.
  *
  * Class Names:
- *  btu-scrollshadow-light - light shadow.
- *  btu-scrollshadow-dark - dark shadow.
+ *  btu-scrollshadow-25 - almost white.
+ *  btu-scrollshadow-900 - almost black.
  *
  * Typical Usage:
- *  @apply btu-scrollshadow-light;
+ *  @apply btu-scrollshadow-25;
  *
  * Custom usage for when you need to style before/after pseudo-elements:
- *  @apply btu-scrollshadow-light before:absolute before:content-[--whitespace] <-- must do this (see more info above);
+ *  @apply btu-scrollshadow-25 before:absolute before:content-[--whitespace] <-- must do this (see more info above);
  */
-module.exports = plugin(function ({ addComponents }) {
+module.exports = plugin(function ({ addComponents, addBase }) {
     const shared = {
         /* these 3 whitespaces dictate the width of the shadow (necessary to give the pseudo elements an intrinsic size). */
         '--whitespace': '"\u2002\u2002\u2002"',
         animation: 'detect-scroll',
         'overflow-x': 'auto',
+        'overscroll-behavior-x': 'contain',
         'animation-fill-mode': 'none',
         'animation-timeline': '--scroll-timeline',
         'scroll-timeline': '--scroll-timeline x',
@@ -44,34 +45,37 @@ module.exports = plugin(function ({ addComponents }) {
             'z-index': '10',
         },
     };
-    const light = Object.assign({}, shared, {
-        '&:before': {
-            left: '0px',
-            'background-image': 'linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
-            'animation-range': '0ch 3ch',
+    addBase({
+        '@keyframes fade-in': {
+            '0%': { opacity: '0' },
+            '100%': { opacity: '1' },
         },
-        '&:after': {
-            right: '0px',
-            'background-image': 'linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
-            'animation-direction': 'reverse',
-            'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+        /* Space-toggle used to track when a scrollable element has reached the end of its scroll in either direction. */
+        '@keyframes detect-scroll': {
+            from: {
+                '--can-scroll': '   ',
+            },
+            to: {
+                '--can-scroll': '   ',
+            },
         },
     });
-    const dark = Object.assign({}, shared, {
-        '&:before': {
-            left: '0px',
-            'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
-            'animation-range': '0ch 3ch',
-        },
-        '&:after': {
-            right: '0px',
-            'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
-            'animation-direction': 'reverse',
-            'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
-        },
-    });
-    addComponents({
-        '.btu-scrollshadow-light': light,
-        '.btu-scrollshadow-dark': dark,
+    const stops = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900].forEach((n) => {
+        const key = `.btu-scrollshadow-${n}`;
+        addComponents({
+            [key]: Object.assign({}, shared, {
+                '&:before': {
+                    left: '0px',
+                    'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
+                    'animation-range': '0ch 3ch',
+                },
+                '&:after': {
+                    right: '0px',
+                    'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
+                    'animation-direction': 'reverse',
+                    'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+                },
+            }),
+        });
     });
 });

package/dist/tailwind-plugin-scroll-shadow.ts

@@ -3,8 +3,8 @@ declare let module: any
 
 /**
  * This plugin adds shadows to the edges of a scrollable container when the content
- * of the container is overflowing.
- * You can choose a light or dark shadow.
+ * of the container overflows.
+ * The shadows use our gray color palette. You can choose which shade of gray you want.
  * Your container must not already use before & after pseudo elements.
  * If you use TWCSS before/after modifiers on this element, make sure you also manually
  * set the content property to the `--whitespace` variable. This is a workaround for TWCSS
@@ -12,22 +12,23 @@ declare let module: any
  * overrides the `--whitespace` variable by default.
  *
  * Class Names:
- *  btu-scrollshadow-light - light shadow.
- *  btu-scrollshadow-dark - dark shadow.
+ *  btu-scrollshadow-25 - almost white.
+ *  btu-scrollshadow-900 - almost black.
  *
  * Typical Usage:
- *  @apply btu-scrollshadow-light;
+ *  @apply btu-scrollshadow-25;
  *
  * Custom usage for when you need to style before/after pseudo-elements:
- *  @apply btu-scrollshadow-light before:absolute before:content-[--whitespace] <-- must do this (see more info above);
+ *  @apply btu-scrollshadow-25 before:absolute before:content-[--whitespace] <-- must do this (see more info above);
  */
 
-module.exports = plugin(function ({ addComponents }) {
+module.exports = plugin(function ({ addComponents, addBase }) {
   const shared = {
     /* these 3 whitespaces dictate the width of the shadow (necessary to give the pseudo elements an intrinsic size). */
     '--whitespace': '"\u2002\u2002\u2002"',
     animation: 'detect-scroll',
     'overflow-x': 'auto',
+    'overscroll-behavior-x': 'contain',
     'animation-fill-mode': 'none',
     'animation-timeline': '--scroll-timeline',
     'scroll-timeline': '--scroll-timeline x',
@@ -49,38 +50,40 @@ module.exports = plugin(function ({ addComponents }) {
     },
   }
 
-  const light = Object.assign({}, shared, {
-    '&:before': {
-      left: '0px',
-      'background-image':
-        'linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
-      'animation-range': '0ch 3ch',
+  addBase({
+    '@keyframes fade-in': {
+      '0%': { opacity: '0' },
+      '100%': { opacity: '1' },
     },
-    '&:after': {
-      right: '0px',
-      'background-image':
-        'linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-25)/0.9) 90% 100%)',
-      'animation-direction': 'reverse',
-      'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+    /* Space-toggle used to track when a scrollable element has reached the end of its scroll in either direction. */
+    '@keyframes detect-scroll': {
+      from: {
+        '--can-scroll': '   ',
+      },
+      to: {
+        '--can-scroll': '   ',
+      },
     },
   })
 
-  const dark = Object.assign({}, shared, {
-    '&:before': {
-      left: '0px',
-      'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
-      'animation-range': '0ch 3ch',
+  const stops = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900].forEach(
+    (n) => {
+      const key = `.btu-scrollshadow-${n}`
+      addComponents({
+        [key]: Object.assign({}, shared, {
+          '&:before': {
+            left: '0px',
+            'background-image': `linear-gradient(to left, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
+            'animation-range': '0ch 3ch',
+          },
+          '&:after': {
+            right: '0px',
+            'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-${n})/0.9) 90% 100%)`,
+            'animation-direction': 'reverse',
+            'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
+          },
+        }),
+      })
     },
-    '&:after': {
-      right: '0px',
-      'background-image': `linear-gradient(to right, transparent, oklch(var(--btu-theme-gray-50)/0.9) 90% 100%)`,
-      'animation-direction': 'reverse',
-      'animation-range': 'calc(100% - 3ch) calc(100% - 0ch)',
-    },
-  })
-
-  addComponents({
-    '.btu-scrollshadow-light': light,
-    '.btu-scrollshadow-dark': dark,
-  })
+  )
 })

package/dist/tailwind-plugin-theme.ts

@@ -1,6 +1,18 @@
 import plugin from 'tailwindcss/plugin'
 declare let module: any
 
+export type ThemeColors =
+  | 'black'
+  | 'white'
+  | 'primary'
+  | 'teal'
+  | 'gray'
+  | 'purple'
+  | 'rose'
+  | 'error'
+  | 'warning'
+  | 'success'
+
 /**
  * Generates all the CSS color properties from the Tailwind configuration.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "0.0.0-alpha.2",
+  "version": "1.0.0-alpha.1",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
   "main": "./dist/tailwind.config.ts",
@@ -8,9 +8,9 @@
     "format": "prettier --write .",
     "clean": "shx rm -rf ./dist/*",
     "build": "yarn clean && tsc --noEmitOnError && shx cp ./src/*.ts ./dist && shx rm ./dist/tailwind.storybook.config* && shx rm -Rf ./dist/stories",
-    "prepack": "yarn build",
+    "prepack": "yarn build && yarn build-storybook",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build -o ./dist/storybook"
   },
   "devDependencies": {
     "@eslint/js": "^9.23.0",