@bccampus/ui-components 0.9.10 → 0.9.12

package/dist/_chunks/index4.js

@@ -604,10 +604,10 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 export {
   DismissableLayer as D,
   Primitive as P,
-  useId as a,
-  Presence as b,
+  Presence as a,
+  composeEventHandlers as b,
   createContextScope as c,
-  composeEventHandlers as d,
+  useId as d,
   useCallbackRef as e,
   useLayoutEffect2 as f,
   dispatchDiscreteCustomEvent as g,

package/dist/_chunks/utils.js

@@ -435,7 +435,7 @@ const fromTheme = (key) => {
 };
 const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
 const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
-const fractionRegex = /^\d+\/\d+$/;
+const fractionRegex = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/;
 const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
 const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
 const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
@@ -461,6 +461,8 @@ const isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNev
 const isArbitraryValue = (value) => arbitraryValueRegex.test(value);
 const isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
 const isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
+const isArbitraryWeight = (value) => getIsArbitraryValue(value, isLabelWeight, isAny);
+const isArbitraryFamilyName = (value) => getIsArbitraryValue(value, isLabelFamilyName, isNever);
 const isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
 const isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
 const isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
@@ -471,6 +473,7 @@ const isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isL
 const isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
 const isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
 const isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
+const isArbitraryVariableWeight = (value) => getIsArbitraryVariable(value, isLabelWeight, true);
 const getIsArbitraryValue = (value, testLabel, testValue) => {
   const result = arbitraryValueRegex.exec(value);
   if (result) {
@@ -497,6 +500,7 @@ const isLabelSize = (label) => label === "length" || label === "size" || label =
 const isLabelLength = (label) => label === "length";
 const isLabelNumber = (label) => label === "number";
 const isLabelFamilyName = (label) => label === "family-name";
+const isLabelWeight = (label) => label === "number" || label === "weight";
 const isLabelShadow = (label) => label === "shadow";
 const getDefaultConfig = () => {
   const themeColor = fromTheme("color");
@@ -553,6 +557,8 @@ const getDefaultConfig = () => {
   const scaleAlignSecondaryAxis = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"];
   const scaleMargin = () => ["auto", ...scaleUnambiguousSpacing()];
   const scaleSizing = () => [isFraction, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
+  const scaleSizingInline = () => [isFraction, "screen", "full", "dvw", "lvw", "svw", "min", "max", "fit", ...scaleUnambiguousSpacing()];
+  const scaleSizingBlock = () => [isFraction, "screen", "full", "lh", "dvh", "lvh", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
   const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
   const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
     position: [isArbitraryVariable, isArbitraryValue]
@@ -762,40 +768,66 @@ const getDefaultConfig = () => {
        */
       position: ["static", "fixed", "absolute", "relative", "sticky"],
       /**
-       * Top / Right / Bottom / Left
+       * Inset
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       inset: [{
         inset: scaleInset()
       }],
       /**
-       * Right / Left
+       * Inset Inline
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       "inset-x": [{
         "inset-x": scaleInset()
       }],
       /**
-       * Top / Bottom
+       * Inset Block
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       "inset-y": [{
         "inset-y": scaleInset()
       }],
       /**
-       * Start
+       * Inset Inline Start
        * @see https://tailwindcss.com/docs/top-right-bottom-left
+       * @todo class group will be renamed to `inset-s` in next major release
        */
       start: [{
+        "inset-s": scaleInset(),
+        /**
+         * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
+         * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
+         */
         start: scaleInset()
       }],
       /**
-       * End
+       * Inset Inline End
        * @see https://tailwindcss.com/docs/top-right-bottom-left
+       * @todo class group will be renamed to `inset-e` in next major release
        */
       end: [{
+        "inset-e": scaleInset(),
+        /**
+         * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
+         * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
+         */
         end: scaleInset()
       }],
+      /**
+       * Inset Block Start
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      "inset-bs": [{
+        "inset-bs": scaleInset()
+      }],
+      /**
+       * Inset Block End
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      "inset-be": [{
+        "inset-be": scaleInset()
+      }],
       /**
        * Top
        * @see https://tailwindcss.com/docs/top-right-bottom-left
@@ -1062,33 +1094,47 @@ const getDefaultConfig = () => {
         p: scaleUnambiguousSpacing()
       }],
       /**
-       * Padding X
+       * Padding Inline
        * @see https://tailwindcss.com/docs/padding
        */
       px: [{
         px: scaleUnambiguousSpacing()
       }],
       /**
-       * Padding Y
+       * Padding Block
        * @see https://tailwindcss.com/docs/padding
        */
       py: [{
         py: scaleUnambiguousSpacing()
       }],
       /**
-       * Padding Start
+       * Padding Inline Start
        * @see https://tailwindcss.com/docs/padding
        */
       ps: [{
         ps: scaleUnambiguousSpacing()
       }],
       /**
-       * Padding End
+       * Padding Inline End
        * @see https://tailwindcss.com/docs/padding
        */
       pe: [{
         pe: scaleUnambiguousSpacing()
       }],
+      /**
+       * Padding Block Start
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pbs: [{
+        pbs: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding Block End
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pbe: [{
+        pbe: scaleUnambiguousSpacing()
+      }],
       /**
        * Padding Top
        * @see https://tailwindcss.com/docs/padding
@@ -1125,33 +1171,47 @@ const getDefaultConfig = () => {
         m: scaleMargin()
       }],
       /**
-       * Margin X
+       * Margin Inline
        * @see https://tailwindcss.com/docs/margin
        */
       mx: [{
         mx: scaleMargin()
       }],
       /**
-       * Margin Y
+       * Margin Block
        * @see https://tailwindcss.com/docs/margin
        */
       my: [{
         my: scaleMargin()
       }],
       /**
-       * Margin Start
+       * Margin Inline Start
        * @see https://tailwindcss.com/docs/margin
        */
       ms: [{
         ms: scaleMargin()
       }],
       /**
-       * Margin End
+       * Margin Inline End
        * @see https://tailwindcss.com/docs/margin
        */
       me: [{
         me: scaleMargin()
       }],
+      /**
+       * Margin Block Start
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mbs: [{
+        mbs: scaleMargin()
+      }],
+      /**
+       * Margin Block End
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mbe: [{
+        mbe: scaleMargin()
+      }],
       /**
        * Margin Top
        * @see https://tailwindcss.com/docs/margin
@@ -1214,6 +1274,48 @@ const getDefaultConfig = () => {
       size: [{
         size: scaleSizing()
       }],
+      /**
+       * Inline Size
+       * @see https://tailwindcss.com/docs/width
+       */
+      "inline-size": [{
+        inline: ["auto", ...scaleSizingInline()]
+      }],
+      /**
+       * Min-Inline Size
+       * @see https://tailwindcss.com/docs/min-width
+       */
+      "min-inline-size": [{
+        "min-inline": ["auto", ...scaleSizingInline()]
+      }],
+      /**
+       * Max-Inline Size
+       * @see https://tailwindcss.com/docs/max-width
+       */
+      "max-inline-size": [{
+        "max-inline": ["none", ...scaleSizingInline()]
+      }],
+      /**
+       * Block Size
+       * @see https://tailwindcss.com/docs/height
+       */
+      "block-size": [{
+        block: ["auto", ...scaleSizingBlock()]
+      }],
+      /**
+       * Min-Block Size
+       * @see https://tailwindcss.com/docs/min-height
+       */
+      "min-block-size": [{
+        "min-block": ["auto", ...scaleSizingBlock()]
+      }],
+      /**
+       * Max-Block Size
+       * @see https://tailwindcss.com/docs/max-height
+       */
+      "max-block-size": [{
+        "max-block": ["none", ...scaleSizingBlock()]
+      }],
       /**
        * Width
        * @see https://tailwindcss.com/docs/width
@@ -1298,7 +1400,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/font-weight
        */
       "font-weight": [{
-        font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
+        font: [themeFontWeight, isArbitraryVariableWeight, isArbitraryWeight]
       }],
       /**
        * Font Stretch
@@ -1312,7 +1414,14 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
+        font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
+      }],
+      /**
+       * Font Feature Settings
+       * @see https://tailwindcss.com/docs/font-feature-settings
+       */
+      "font-features": [{
+        "font-features": [isArbitraryValue]
       }],
       /**
        * Font Variant Numeric
@@ -1734,33 +1843,47 @@ const getDefaultConfig = () => {
         border: scaleBorderWidth()
       }],
       /**
-       * Border Width X
+       * Border Width Inline
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-x": [{
         "border-x": scaleBorderWidth()
       }],
       /**
-       * Border Width Y
+       * Border Width Block
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-y": [{
         "border-y": scaleBorderWidth()
       }],
       /**
-       * Border Width Start
+       * Border Width Inline Start
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-s": [{
         "border-s": scaleBorderWidth()
       }],
       /**
-       * Border Width End
+       * Border Width Inline End
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-e": [{
         "border-e": scaleBorderWidth()
       }],
+      /**
+       * Border Width Block Start
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-bs": [{
+        "border-bs": scaleBorderWidth()
+      }],
+      /**
+       * Border Width Block End
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      "border-w-be": [{
+        "border-be": scaleBorderWidth()
+      }],
       /**
        * Border Width Top
        * @see https://tailwindcss.com/docs/border-width
@@ -1835,33 +1958,47 @@ const getDefaultConfig = () => {
         border: scaleColor()
       }],
       /**
-       * Border Color X
+       * Border Color Inline
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-x": [{
         "border-x": scaleColor()
       }],
       /**
-       * Border Color Y
+       * Border Color Block
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-y": [{
         "border-y": scaleColor()
       }],
       /**
-       * Border Color S
+       * Border Color Inline Start
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-s": [{
         "border-s": scaleColor()
       }],
       /**
-       * Border Color E
+       * Border Color Inline End
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-e": [{
         "border-e": scaleColor()
       }],
+      /**
+       * Border Color Block Start
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color-bs": [{
+        "border-bs": scaleColor()
+      }],
+      /**
+       * Border Color Block End
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      "border-color-be": [{
+        "border-be": scaleColor()
+      }],
       /**
        * Border Color Top
        * @see https://tailwindcss.com/docs/border-color
@@ -2740,33 +2877,47 @@ const getDefaultConfig = () => {
         "scroll-m": scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Margin X
+       * Scroll Margin Inline
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mx": [{
         "scroll-mx": scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Margin Y
+       * Scroll Margin Block
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-my": [{
         "scroll-my": scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Margin Start
+       * Scroll Margin Inline Start
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ms": [{
         "scroll-ms": scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Margin End
+       * Scroll Margin Inline End
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-me": [{
         "scroll-me": scaleUnambiguousSpacing()
       }],
+      /**
+       * Scroll Margin Block Start
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-mbs": [{
+        "scroll-mbs": scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin Block End
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      "scroll-mbe": [{
+        "scroll-mbe": scaleUnambiguousSpacing()
+      }],
       /**
        * Scroll Margin Top
        * @see https://tailwindcss.com/docs/scroll-margin
@@ -2803,33 +2954,47 @@ const getDefaultConfig = () => {
         "scroll-p": scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Padding X
+       * Scroll Padding Inline
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-px": [{
         "scroll-px": scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Padding Y
+       * Scroll Padding Block
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-py": [{
         "scroll-py": scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Padding Start
+       * Scroll Padding Inline Start
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-ps": [{
         "scroll-ps": scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Padding End
+       * Scroll Padding Inline End
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pe": [{
         "scroll-pe": scaleUnambiguousSpacing()
       }],
+      /**
+       * Scroll Padding Block Start
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-pbs": [{
+        "scroll-pbs": scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding Block End
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      "scroll-pbe": [{
+        "scroll-pbe": scaleUnambiguousSpacing()
+      }],
       /**
        * Scroll Padding Top
        * @see https://tailwindcss.com/docs/scroll-padding
@@ -2964,15 +3129,15 @@ const getDefaultConfig = () => {
     conflictingClassGroups: {
       overflow: ["overflow-x", "overflow-y"],
       overscroll: ["overscroll-x", "overscroll-y"],
-      inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
+      inset: ["inset-x", "inset-y", "inset-bs", "inset-be", "start", "end", "top", "right", "bottom", "left"],
       "inset-x": ["right", "left"],
       "inset-y": ["top", "bottom"],
       flex: ["basis", "grow", "shrink"],
       gap: ["gap-x", "gap-y"],
-      p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
+      p: ["px", "py", "ps", "pe", "pbs", "pbe", "pt", "pr", "pb", "pl"],
       px: ["pr", "pl"],
       py: ["pt", "pb"],
-      m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
+      m: ["mx", "my", "ms", "me", "mbs", "mbe", "mt", "mr", "mb", "ml"],
       mx: ["mr", "ml"],
       my: ["mt", "mb"],
       size: ["w", "h"],
@@ -2992,18 +3157,18 @@ const getDefaultConfig = () => {
       "rounded-b": ["rounded-br", "rounded-bl"],
       "rounded-l": ["rounded-tl", "rounded-bl"],
       "border-spacing": ["border-spacing-x", "border-spacing-y"],
-      "border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
+      "border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-bs", "border-w-be", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
       "border-w-x": ["border-w-r", "border-w-l"],
       "border-w-y": ["border-w-t", "border-w-b"],
-      "border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
+      "border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-bs", "border-color-be", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
       "border-color-x": ["border-color-r", "border-color-l"],
       "border-color-y": ["border-color-t", "border-color-b"],
       translate: ["translate-x", "translate-y", "translate-none"],
       "translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
-      "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
+      "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mbs", "scroll-mbe", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
       "scroll-mx": ["scroll-mr", "scroll-ml"],
       "scroll-my": ["scroll-mt", "scroll-mb"],
-      "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
+      "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pbs", "scroll-pbe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
       "scroll-px": ["scroll-pr", "scroll-pl"],
       "scroll-py": ["scroll-pt", "scroll-pb"],
       touch: ["touch-x", "touch-y", "touch-pz"],

package/dist/components/ui/horizontal-list.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as cn } from "../../_chunks/utils.js";
 import { Button } from "./button.js";
-import { useRef, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { c as cva } from "../../_chunks/index2.js";
 import { c as createLucideIcon } from "../../_chunks/createLucideIcon.js";
 const __iconNode$1 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
@@ -9,11 +9,11 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1);
 const __iconNode = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
 const ChevronRight = createLucideIcon("chevron-right", __iconNode);
 const horizontalListVariants = cva(
-  "scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
+  "py-1 scrollbar-hidden overscroll-x-contain overflow-x-auto snap-start snap-mandatory scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
   {
     variants: {
       variant: {
-        contain: "w-full ",
+        contain: "w-full",
         overflow: "w-screen px-(--spacing-section) -ms-(--spacing-section) scroll-px-(--spacing-section)"
       }
     },
@@ -30,34 +30,34 @@ function HorizontalList({
   scrollBy = 360,
   ...props
 }) {
+  const rootRef = useRef(null);
   const containerRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [isOverflowed, setIsOverflowed] = useState(true);
   const scrollLeft = useCallback(() => {
     containerRef.current?.scrollBy({ left: -scrollBy });
   }, [scrollBy]);
   const scrollRight = useCallback(() => {
     containerRef.current?.scrollBy({ left: scrollBy });
   }, [scrollBy]);
+  useEffect(() => {
+    if (rootRef.current && wrapperRef.current) {
+      const rootRect = rootRef.current.getBoundingClientRect();
+      const wrapperRect = wrapperRef.current.getBoundingClientRect();
+      setIsOverflowed(wrapperRect.width - rootRect.width > 8);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: cn("flex gap-4", {
         "flex-col": toolbarLocation === "bottom",
         "flex-col-reverse": toolbarLocation === "top"
       }),
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: containerRef,
-            className: cn(
-              horizontalListVariants({ variant }),
-              className
-            ),
-            ...props,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-center sm:justify-start", children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn(horizontalListVariants({ variant }), className), ...props, children: /* @__PURE__ */ jsx("div", { className: "w-fit flex flex-row flex-nowrap gap-(--gap-card) ", ref: wrapperRef, children }) }),
+        isOverflowed && /* @__PURE__ */ jsxs("div", { className: "flex justify-center sm:justify-start", children: [
           /* @__PURE__ */ jsx(Button, { size: "icon", variant: "ghost", className: "rounded-full", onClick: scrollLeft, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-9" }) }),
           /* @__PURE__ */ jsx(Button, { size: "icon", variant: "ghost", className: "rounded-full", onClick: scrollRight, children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-9" }) })
         ] })

package/dist/components/ui/navigation-menu.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default from "react";
 import ReactDOM__default from "react-dom";
-import { c as createContextScope, P as Primitive, u as useControllableState, a as useId, b as Presence, d as composeEventHandlers, e as useCallbackRef, D as DismissableLayer, f as useLayoutEffect2, g as dispatchDiscreteCustomEvent } from "../../_chunks/index4.js";
+import { c as createContextScope, P as Primitive, u as useControllableState, a as Presence, b as composeEventHandlers, d as useId, e as useCallbackRef, D as DismissableLayer, f as useLayoutEffect2, g as dispatchDiscreteCustomEvent } from "../../_chunks/index4.js";
 import { c as composeRefs, u as useComposedRefs } from "../../_chunks/index3.js";
 import { c as cn } from "../../_chunks/utils.js";
 import { buttonVariants } from "./button.js";

package/dist/components/ui/popover.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useLayoutEffect, useState } from "react";
-import { e as useCallbackRef$1, P as Primitive, f as useLayoutEffect2, c as createContextScope, u as useControllableState, a as useId, d as composeEventHandlers, b as Presence, D as DismissableLayer } from "../../_chunks/index4.js";
+import { e as useCallbackRef$1, P as Primitive, f as useLayoutEffect2, c as createContextScope, u as useControllableState, d as useId, a as Presence, b as composeEventHandlers, D as DismissableLayer } from "../../_chunks/index4.js";
 import { u as useComposedRefs, c as composeRefs } from "../../_chunks/index3.js";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
@@ -415,6 +415,62 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform: platform2,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = "clippingAncestors",
+    rootBoundary = "viewport",
+    elementContext = "floating",
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === "floating" ? "reference" : "floating";
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+    element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === "floating" ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+  const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
 const computePosition$1 = async (reference, floating, config) => {
   const {
     placement = "bottom",
@@ -437,6 +493,7 @@ const computePosition$1 = async (reference, floating, config) => {
   let middlewareData = {};
   let resetCount = 0;
   for (let i = 0; i < validMiddleware.length; i++) {
+    var _platform$detectOverf;
     const {
       name,
       fn
@@ -454,7 +511,10 @@ const computePosition$1 = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform: platform2,
+      platform: {
+        ...platform2,
+        detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+      },
       elements: {
         reference,
         floating
@@ -498,62 +558,6 @@ const computePosition$1 = async (reference, floating, config) => {
     middlewareData
   };
 };
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform: platform2,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = "clippingAncestors",
-    rootBoundary = "viewport",
-    elementContext = "floating",
-    altBoundary = false,
-    padding = 0
-  } = evaluate(options, state);
-  const paddingObject = getPaddingObject(padding);
-  const altContext = elementContext === "floating" ? "reference" : "floating";
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
-    element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === "floating" ? {
-    x,
-    y,
-    width: rects.floating.width,
-    height: rects.floating.height
-  } : rects.reference;
-  const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
-  const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
-}
 const arrow$3 = (options) => ({
   name: "arrow",
   options,
@@ -655,7 +659,7 @@ const flip$2 = function(options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -745,7 +749,8 @@ const hide$2 = function(options) {
     options,
     async fn(state) {
       const {
-        rects
+        rects,
+        platform: platform2
       } = state;
       const {
         strategy = "referenceHidden",
@@ -753,7 +758,7 @@ const hide$2 = function(options) {
       } = evaluate(options, state);
       switch (strategy) {
         case "referenceHidden": {
-          const overflow = await detectOverflow(state, {
+          const overflow = await platform2.detectOverflow(state, {
             ...detectOverflowOptions,
             elementContext: "reference"
           });
@@ -766,7 +771,7 @@ const hide$2 = function(options) {
           };
         }
         case "escaped": {
-          const overflow = await detectOverflow(state, {
+          const overflow = await platform2.detectOverflow(state, {
             ...detectOverflowOptions,
             altBoundary: true
           });
@@ -864,7 +869,8 @@ const shift$2 = function(options) {
       const {
         x,
         y,
-        placement
+        placement,
+        platform: platform2
       } = state;
       const {
         mainAxis: checkMainAxis = true,
@@ -887,7 +893,7 @@ const shift$2 = function(options) {
         x,
         y
       };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -1010,7 +1016,7 @@ const size$2 = function(options) {
         },
         ...detectOverflowOptions
       } = evaluate(options, state);
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
       const side = getSide(placement);
       const alignment = getAlignment(placement);
       const isYAxis = getSideAxis(placement) === "y";
@@ -3181,6 +3187,12 @@ function RemoveScrollSideCar(props) {
     if ("touches" in event && moveDirection === "h" && target.type === "range") {
       return false;
     }
+    var selection = window.getSelection();
+    var anchorNode = selection && selection.anchorNode;
+    var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
+    if (isTouchingSelection) {
+      return false;
+    }
     var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
     if (!canBeScrolledInMainDirection) {
       return true;

package/dist/lib/object.js

@@ -1,10 +1,13 @@
-const get = (object, prop) => prop.split(".").reduce((reducedObject, key) => reducedObject && key in reducedObject ? reducedObject[key] : void 0, object);
+const get = (object, prop) => prop.split(".").reduce(
+  (reducedObject, key) => reducedObject && key in reducedObject ? reducedObject[key] : void 0,
+  object
+);
 const set = (object, prop, value) => {
   const propChunks = prop.split(".");
   const lastChunk = propChunks.pop();
   if (!lastChunk) return object;
   const ref = propChunks.reduce((reducedObject, key) => {
-    reducedObject[key] = {};
+    if (reducedObject[key] === void 0) reducedObject[key] = {};
     return reducedObject[key];
   }, object);
   ref[lastChunk] = value;
@@ -22,7 +25,10 @@ const omit = (object, props) => {
     const propChunks = prop.split(".");
     const lastChunk = propChunks.pop();
     if (lastChunk) {
-      const ref = propChunks.reduce((reducedObject, key) => reducedObject && key in reducedObject ? reducedObject[key] : void 0, result);
+      const ref = propChunks.reduce(
+        (reducedObject, key) => reducedObject && key in reducedObject ? reducedObject[key] : void 0,
+        result
+      );
       if (ref && lastChunk in ref) delete ref[lastChunk];
     }
   });

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.9.10",
+  "version": "0.9.12",
   "description": "BCcampus React components",
   "type": "module",
+  "license": "UNLICENSED",
   "exports": {
     ".": {
       "types": "./dist/components/index.d.ts",
@@ -22,14 +23,16 @@
     "./theme.css": "./src/styles/theme.css",
     "./typography.css": "./src/styles/typography.css"
   },
+  "packageManager": "yarn@4.12.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "ladle serve",
     "check": "tsc -b && eslint ./src",
     "build": "tsc -b && vite build",
+    "build:ladle": "ladle build",
     "lint": "eslint .",
     "prepublish": "yarn build",
     "publish": "yarn npm publish --access public --tolerate-republish",
-    "preview": "vite preview"
+    "preview": "ladle preview"
   },
   "dependencies": {
     "@bccampus/media-kit": "^0.1.1",
@@ -49,14 +52,6 @@
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0"
   },
-  "peerDependencies": {
-    "@nanostores/react": "^1.0.0",
-    "nanostores": "^1.1.0",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "tailwindcss": "^4.1.18",
-    "tw-animate-css": "^1.4.0"
-  },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "@ladle/react": "^5.1.1",

package/src/components/ui/horizontal-list.tsx

@@ -1,16 +1,16 @@
 import { cn } from "@/lib/utils";
 import { Button } from "./button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 export type HorizontalListVariantsProps = VariantProps<typeof horizontalListVariants>;
 export const horizontalListVariants = cva(
-  "scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
+  "py-1 scrollbar-hidden overscroll-x-contain overflow-x-auto snap-start snap-mandatory scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
   {
     variants: {
       variant: {
-        contain: "w-full ",
+        contain: "w-full",
         overflow: "w-screen px-(--spacing-section) -ms-(--spacing-section) scroll-px-(--spacing-section)",
       },
     },
@@ -33,7 +33,10 @@ export function HorizontalList({
   scrollBy = 360,
   ...props
 }: HorizontalListProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [isOverflowed, setIsOverflowed] = useState<boolean>(true);
 
   const scrollLeft = useCallback(() => {
     containerRef.current?.scrollBy({ left: -scrollBy });
@@ -43,32 +46,38 @@ export function HorizontalList({
     containerRef.current?.scrollBy({ left: scrollBy });
   }, [scrollBy]);
 
+  useEffect(() => {
+    if (rootRef.current && wrapperRef.current) {
+      const rootRect = rootRef.current.getBoundingClientRect();
+      const wrapperRect = wrapperRef.current.getBoundingClientRect();
+
+      setIsOverflowed(wrapperRect.width - rootRect.width > 8);
+    }
+  }, []);
+
   return (
     <div
+      ref={rootRef}
       className={cn("flex gap-4", {
         "flex-col": toolbarLocation === "bottom",
         "flex-col-reverse": toolbarLocation === "top",
       })}
     >
-      <div
-        ref={containerRef}
-        className={cn(
-          horizontalListVariants({ variant }),
-
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-      <div className="flex justify-center sm:justify-start">
-        <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollLeft}>
-          <ChevronLeft className="size-9" />
-        </Button>
-        <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollRight}>
-          <ChevronRight className="size-9" />
-        </Button>
+      <div ref={containerRef} className={cn(horizontalListVariants({ variant }), className)} {...props}>
+        <div className="w-fit flex flex-row flex-nowrap gap-(--gap-card) " ref={wrapperRef}>
+          {children}
+        </div>
       </div>
+      {isOverflowed && (
+        <div className="flex justify-center sm:justify-start">
+          <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollLeft}>
+            <ChevronLeft className="size-9" />
+          </Button>
+          <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollRight}>
+            <ChevronRight className="size-9" />
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

package/src/lib/object.ts

@@ -1,48 +1,52 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-export const get = <T extends object>(object: T, prop: string) => prop
-    .split('.')
-    .reduce<any>((reducedObject, key) => (reducedObject && key in reducedObject) ? reducedObject[key] : undefined, object);
+export const get = <T extends object>(object: T, prop: string) =>
+  prop
+    .split(".")
+    .reduce<any>(
+      (reducedObject, key) => (reducedObject && key in reducedObject ? reducedObject[key] : undefined),
+      object,
+    );
 
 export const set = <T extends object, V>(object: T, prop: string, value: V) => {
-    const propChunks = prop.split('.');
-    const lastChunk = propChunks.pop();
-    if (!lastChunk) return object;
+  const propChunks = prop.split(".");
+  const lastChunk = propChunks.pop();
+  if (!lastChunk) return object;
 
-    const ref = propChunks.reduce<any>((reducedObject, key) => {
-        reducedObject[key] = {};
-        return reducedObject[key];
-    }, object);
+  const ref = propChunks.reduce<any>((reducedObject, key) => {
+    if (reducedObject[key] === undefined) reducedObject[key] = {};
+    return reducedObject[key];
+  }, object);
 
-    ref[lastChunk] = value;
+  ref[lastChunk] = value;
 
-    return object;
-}
+  return object;
+};
 
 export const pick = <T extends object>(object: T, props: string[]) => {
-
-    return props.reduce<Record<string, unknown>>((result, key) => {
-
-        set(result, key, get(object, key));
-
-        return result;
-    }, {}) as Partial<T>;
-}
-
-export const omit = <T extends object>(object: T, props: string[]) => {
-    const result: Partial<T> = { ...object };
-
-    props.forEach(prop => {
-        const propChunks = prop.split('.');
-        const lastChunk = propChunks.pop();
-        if (lastChunk) {
-            const ref = propChunks.reduce<any>((reducedObject, key) => (reducedObject && key in reducedObject) ? reducedObject[key] : undefined, result);
-            if (ref && lastChunk in ref) delete ref[lastChunk];
-        }
-    })
+  return props.reduce<Record<string, unknown>>((result, key) => {
+    set(result, key, get(object, key));
 
     return result;
-}
+  }, {}) as Partial<T>;
+};
 
-export const isObject = (object: unknown) => (typeof object === 'object' && !Array.isArray(object) && object !== null);
+export const omit = <T extends object>(object: T, props: string[]) => {
+  const result: Partial<T> = { ...object };
 
+  props.forEach((prop) => {
+    const propChunks = prop.split(".");
+    const lastChunk = propChunks.pop();
+    if (lastChunk) {
+      const ref = propChunks.reduce<any>(
+        (reducedObject, key) => (reducedObject && key in reducedObject ? reducedObject[key] : undefined),
+        result,
+      );
+      if (ref && lastChunk in ref) delete ref[lastChunk];
+    }
+  });
+
+  return result;
+};
+
+export const isObject = (object: unknown) => typeof object === "object" && !Array.isArray(object) && object !== null;