@zayne-labs/ui-react 0.8.10 → 0.8.12

package/dist/style.css

@@ -0,0 +1,467 @@
+/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --font-weight-semibold: 600;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --color-shadcn-muted-foreground: hsl(215.4, 16.3%, 46.9%);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .bottom-\[25px\] {
+    bottom: 25px;
+  }
+  .isolate {
+    isolation: isolate;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-30 {
+    z-index: 30;
+  }
+  .z-\[2\] {
+    z-index: 2;
+  }
+  .z-\[100\] {
+    z-index: 100;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .scrollbar-hidden {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-\[6px\] {
+    width: 6px;
+    height: 6px;
+  }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .w-\[35px\] {
+    width: 35px;
+  }
+  .w-fit {
+    width: fit-content;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .rotate-180 {
+    rotate: 180deg;
+  }
+  .\[transform\:translate3d\(var\(--translate-distance\)\,0\,0\)\] {
+    transform: translate3d(var(--translate-distance),0,0);
+  }
+  .cursor-grab {
+    cursor: grab;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .snap-x {
+    scroll-snap-type: x var(--tw-scroll-snap-strictness);
+  }
+  .snap-mandatory {
+    --tw-scroll-snap-strictness: mandatory;
+  }
+  .snap-center {
+    scroll-snap-align: center;
+  }
+  .snap-always {
+    scroll-snap-stop: always;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-\[15px\] {
+    gap: 15px;
+  }
+  .overflow-x-scroll {
+    overflow-x: scroll;
+  }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
+  .rounded-\[50\%\] {
+    border-radius: 50%;
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-shadcn-muted-foreground {
+    color: var(--color-shadcn-muted-foreground);
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-60 {
+    opacity: 60%;
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
+  .\[transition\:transform_800ms_ease\] {
+    transition: transform 800ms ease;
+  }
+  .file\:border-0 {
+    &::file-selector-button {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .file\:bg-transparent {
+    &::file-selector-button {
+      background-color: transparent;
+    }
+  }
+  .placeholder\:text-shadcn-muted-foreground {
+    &::placeholder {
+      color: var(--color-shadcn-muted-foreground);
+    }
+  }
+  .focus-visible\:outline-hidden {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  .active\:scale-\[1\.06\] {
+    &:active {
+      scale: 1.06;
+    }
+  }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
+  .data-\[index\=0\]\:mt-1 {
+    &[data-index="0"] {
+      margin-top: calc(var(--spacing) * 1);
+    }
+  }
+  .max-md\:cursor-default {
+    @media (width < 48rem) {
+      cursor: default;
+    }
+  }
+  .max-md\:flex-col {
+    @media (width < 48rem) {
+      flex-direction: column;
+    }
+  }
+  .md\:cursor-default {
+    @media (width >= 48rem) {
+      cursor: default;
+    }
+  }
+  .md\:flex-col {
+    @media (width >= 48rem) {
+      flex-direction: column;
+    }
+  }
+  .lg\:size-6 {
+    @media (width >= 64rem) {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+@property --tw-scroll-snap-strictness {
+  syntax: "*";
+  inherits: false;
+  initial-value: proximity;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-scroll-snap-strictness: proximity;
+      --tw-font-weight: initial;
+      --tw-border-style: solid;
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zayne-labs/ui-react",
   "type": "module",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "description": "A composable UI/UI-utilities components library. ",
   "author": "Ryan Zayne",
   "license": "MIT",
@@ -17,6 +17,7 @@
   "sideEffects": false,
   "exports": {
     ".": null,
+    "./style.css": "./dist/style.css",
     "./*": "./dist/esm/ui/*/index.js",
     "./common/*": "./dist/esm/common/*/index.js",
     "./css/*": "./css/*"
@@ -32,16 +33,11 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-hook-form": ">=7.53.2",
+    "tailwind-merge": ">=2.5.0",
     "tailwindcss": ">=4.0.0",
     "zustand": ">=5.0.0"
   },
   "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
     "react-hook-form": {
       "optional": true
     },
@@ -53,15 +49,15 @@
     }
   },
   "dependencies": {
-    "@zayne-labs/toolkit-core": "0.9.27",
-    "@zayne-labs/toolkit-react": "0.9.27",
-    "@zayne-labs/toolkit-type-helpers": "0.9.27",
-    "tailwind-merge": "3.2.0"
+    "@zayne-labs/toolkit-core": "0.9.29",
+    "@zayne-labs/toolkit-react": "0.9.29",
+    "@zayne-labs/toolkit-type-helpers": "0.9.29"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.17.4",
     "@size-limit/esbuild-why": "11.2.0",
     "@size-limit/preset-small-lib": "11.2.0",
+    "@tailwindcss/cli": "^4.1.4",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/react": "19.1.2",
     "@types/react-dom": "19.1.2",
@@ -69,10 +65,12 @@
     "concurrently": "9.1.2",
     "cross-env": "7.0.3",
     "publint": "0.3.12",
+    "publish": "^0.6.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-hook-form": "7.56.0",
+    "react-hook-form": "7.56.1",
     "size-limit": "11.2.0",
+    "tailwind-merge": "3.2.0",
     "tailwindcss": "^4.1.4",
     "tsup": "8.4.0",
     "typescript": "5.8.3",
@@ -94,9 +92,9 @@
     }
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "concurrently 'tsup' 'pnpm:build:tailwind'",
     "build:dev": "cross-env NODE_ENV=development tsup",
-    "build:tailwind": "pnpx tailwindcss -i ./tailwind.css -o ./dist/css/main.css --watch",
+    "build:tailwind": "tailwindcss -i css/style.css -o ./dist/style.css",
     "build:test": "concurrently --prefix-colors \"yellow.bold,#7da4f8.bold,magenta\" --names PUBLINT,TSUP 'pnpm:lint:publint' 'pnpm:build:dev'",
     "dev": "pnpm build:dev --watch",
     "lint:attw": "attw --pack . --profile esm-only --format table-flipped --ignore-rules=cjs-resolves-to-esm --ignore-rules=named-exports",

package/dist/esm/chunk-L2SROZYQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/common/slot/slot.tsx"],"names":[],"mappings":";;;;;;AAYO,SAAS,SAAA,CAAU,EAAE,QAAA,EAAyC,EAAA;AACpE,EAAO,OAAA,QAAA;AACR;AAEA,IAAM,WAAA,GAAc,CAAC,KAAwD,KAAA;AAC5E,EAAA,OAAO,cAAe,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,IAAS,KAAA,SAAA;AAChD,CAAA;AAMO,SAAS,KAAK,KAAkB,EAAA;AACtC,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,eAAA,EAAoB,GAAA,KAAA;AAEzC,EAAA,MAAM,gBAAgB,OAAyB,CAAA,QAAQ,CAAI,GAAA,QAAA,GAAW,CAAC,QAAQ,CAAA;AAC/E,EAAA,MAAM,YAAY,aAAc,CAAA,IAAA,CAAK,CAAC,OAAY,KAAA,WAAA,CAAY,OAAO,CAAC,CAAA;AAEtE,EAAA,IAAI,SAAW,EAAA;AAEd,IAAM,MAAA,UAAA,GAAc,UAAU,KAAoB,CAAA,QAAA;AAElD,IAAA,IAAI,QAAS,CAAA,KAAA,CAAM,UAAU,CAAA,GAAI,CAAG,EAAA;AACnC,MAAO,OAAA,QAAA,CAAS,KAAK,IAAI,CAAA;AAAA;AAG1B,IAAA,MAAM,kBAAqB,GAAA,aAAA,CAAc,GAAI,CAAA,CAAC,KAAU,KAAA;AACvD,MAAA,IAAI,UAAU,SAAW,EAAA;AAExB,QAAA,OAAO,cAA0B,CAAA,UAAU,CAAK,IAAA,UAAA,CAAW,KAAM,CAAA,QAAA;AAAA;AAGlE,MAAO,OAAA,KAAA;AAAA,KACP,CAAA;AAED,IACC,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAW,EAAA,EAAA,GAAG,eACb,EAAA,EAAA,cAAA,CAAe,UAAU,CAAA,IAAK,YAAa,CAAA,UAAA,EAAY,MAAW,EAAA,kBAAkB,CACtF,CAAA;AAAA;AAIF,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAW,GAAG,eAAA,EAAA,EAAkB,QAAS,CAAA;AAClD;AASA,SAAS,UAAU,KAAuB,EAAA;AACzC,EAAA,MAAM,EAAE,QAAU,EAAA,GAAA,EAAK,YAAc,EAAA,GAAG,iBAAoB,GAAA,KAAA;AAE5D,EAAI,IAAA,CAAC,cAA6B,CAAA,QAAQ,CAAG,EAAA;AAC5C,IAAO,OAAA,QAAA,CAAS,MAAM,QAAQ,CAAA,GAAI,IAAI,QAAS,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,IAAA;AAAA;AAG7D,EAAA,MAAM,QAAY,GAAA,QAAA,CAAS,KAAM,CAAA,GAAA,IAC5B,QAAqC,CAAA,GAAA;AAE1C,EAAA,MAAM,WAAc,GAAA;AAAA,IACnB,GAAG,UAAA,CAAW,eAAiB,EAAA,QAAA,CAAS,KAAK,CAAA;AAAA,IAC7C,KAAK,YAAe,GAAA,WAAA,CAAY,CAAC,YAAc,EAAA,QAAQ,CAAC,CAAI,GAAA;AAAA,GAC7D;AAEA,EAAO,OAAA,YAAA,CAAa,UAAU,WAAW,CAAA;AAC1C","file":"chunk-L2SROZYQ.js","sourcesContent":["import * as React from \"react\";\n\nimport { type InferProps, composeRefs, mergeProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\ntype SlotProps = InferProps<HTMLElement>;\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * ----------------------------------------------------------------------------------------------- */\n\nexport function Slottable({ children }: Pick<SlotProps, \"children\">) {\n\treturn children;\n}\n\nconst isSlottable = (child: React.ReactNode): child is React.ReactElement => {\n\treturn isValidElement(child) && child.type === Slottable;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * ----------------------------------------------------------------------------------------------- */\n\nexport function Slot(props: SlotProps) {\n\tconst { children, ...restOfSlotProps } = props;\n\n\tconst childrenArray = isArray<React.ReactNode>(children) ? children : [children];\n\tconst slottable = childrenArray.find((element) => isSlottable(element));\n\n\tif (slottable) {\n\t\t// == The new element to render is the one passed as a child of `Slottable`\n\t\tconst newElement = (slottable.props as SlotProps).children;\n\n\t\tif (Children.count(newElement) > 1) {\n\t\t\treturn Children.only(null);\n\t\t}\n\n\t\tconst newElementChildren = childrenArray.map((child) => {\n\t\t\tif (child === slottable) {\n\t\t\t\t// == Because the new element will be the one rendered, we are only interested in grabbing its children (`newElement.props.children`)\n\t\t\t\treturn isValidElement<SlotProps>(newElement) && newElement.props.children;\n\t\t\t}\n\n\t\t\treturn child;\n\t\t});\n\n\t\treturn (\n\t\t\t<SlotClone {...restOfSlotProps}>\n\t\t\t\t{isValidElement(newElement) && cloneElement(newElement, undefined, newElementChildren)}\n\t\t\t</SlotClone>\n\t\t);\n\t}\n\n\treturn <SlotClone {...restOfSlotProps}>{children}</SlotClone>;\n}\n\ntype SlotCloneProps = {\n\tchildren: React.ReactNode;\n\tref?: React.RefObject<HTMLElement>;\n};\n\ntype UnknownProps = Record<string, unknown>;\n\nfunction SlotClone(props: SlotCloneProps) {\n\tconst { children, ref: forwardedRef, ...restOfSlotProps } = props;\n\n\tif (!isValidElement<UnknownProps>(children)) {\n\t\treturn Children.count(children) > 1 ? Children.only(null) : null;\n\t}\n\n\tconst childRef = (children.props.ref\n\t\t?? (children as unknown as UnknownProps).ref) as React.Ref<HTMLElement>;\n\n\tconst clonedProps = {\n\t\t...mergeProps(restOfSlotProps, children.props),\n\t\tref: forwardedRef ? composeRefs([forwardedRef, childRef]) : childRef,\n\t};\n\n\treturn cloneElement(children, clonedProps);\n}\n"]}