refract-ui 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Param Mehta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# refract-ui
+
+Themeable React component library — extracted from [parammehta.com](https://parammehta.com).
+Primitives, form controls, and a couple of Three.js pieces (device models, a
+displacement carousel), with no Next.js or portfolio-specific coupling.
+
+Storybook: https://storybook.parammehta.com
+
+## Install
+
+```bash
+npm i refract-ui
+```
+
+`react`, `react-dom`, and `framer-motion` are peer dependencies. `three` and
+`three-stdlib` are optional peers, only required if you use `refract-ui/model`
+or `refract-ui/carousel`.
+
+## Usage
+
+```tsx
+import { Text, ThemeProvider, tokenStyles } from 'refract-ui';
+import 'refract-ui/styles.css';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Text size="l">Hello</Text>
+    </ThemeProvider>
+  );
+}
+```
+
+Required stylesheet: `refract-ui/styles.css` (component styles + a couple of
+shared keyframes). Optional: `refract-ui/reset.css` (a minimal CSS reset) and
+`refract-ui/media.css` (the breakpoint contract as `@custom-media`, for
+consumers running their own `postcss-preset-env`).
+
+### Routing
+
+Components that render links (`Link`, `Button`, `Breadcrumbs`) default to a
+plain `<a>`. To route through your framework's link component, wrap your app
+in `LinkProvider`:
+
+```tsx
+import { LinkProvider } from 'refract-ui';
+import NextLink from 'next/link';
+import { forwardRef } from 'react';
+
+const NextLinkAdapter = forwardRef((props, ref) => <NextLink {...props} ref={ref} />);
+
+<LinkProvider component={NextLinkAdapter}>{/* ... */}</LinkProvider>;
+```
+
+### Fonts
+
+No fonts are bundled. `--fontStack` falls back to `--brandFontStack` (unset by
+default) then the system font stack — set `--brandFontStack` to use your own
+brand typeface.
+
+### 3D components (`Model`, `Carousel`)
+
+These use `three`/`three-stdlib` and load `.glb` device models via a DRACO
+decoder. Both are optional peer dependencies — install them yourself, then:
+
+```bash
+cp -R node_modules/three/examples/jsm/libs/draco/gltf/ public/draco/
+cp node_modules/refract-ui/dist/assets/*.glb public/models/
+```
+
+Both paths are configurable via `RefractProvider`'s `dracoDecoderPath` and
+`modelBasePath` props if you serve them elsewhere.
+
+## Development
+
+```bash
+npm install
+npm run storybook     # dev, localhost:9009
+npm run build          # vite build -> dist/
+npm test               # vitest
+npm run lint            # eslint
+npm run stylelint
+npm run typecheck
+```
+
+## Publishing
+
+Versioning and npm publishing are automated with release-please + npm trusted
+publishing (GitHub Actions OIDC) — see `.github/workflows/`. Pushing a
+Conventional Commit to `main` is enough; there is no manual publish step.

package/dist/carousel.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";
+//# sourceMappingURL=carousel.cjs.map

package/dist/carousel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/carousel.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=carousel.js.map

package/dist/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+export interface TextProps extends ComponentPropsWithoutRef<'span'> {
+    children?: ReactNode;
+    size?: 's' | 'm' | 'l' | 'xl';
+    as?: ElementType;
+    align?: string;
+    weight?: string;
+    secondary?: boolean;
+}
+export declare const Text: ({ children, size, as: Component, align, weight, secondary, className, ...rest }: TextProps) => import("react").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Text';

package/dist/entries/carousel.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/entries/model.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p={desktop:2080,laptop:1680,tablet:1040,mobile:696,mobileS:400},T=e=>Number(e.replace("px","")),c=e=>`${e}px`,x=e=>`${e/16}rem`,d=e=>Number(e.replace("ms","")),m=e=>`${e}ms`,y=e=>(e==null?void 0:e.split(" ").map(s=>Number(s)/255))||[];function f(e,s={}){const n={},a=Object.keys(e);for(const o of a){let t=e[o];typeof t=="number"&&o==="delay"&&(t=m(t)),typeof t=="number"&&o!=="opacity"&&(t=c(t)),n[`--${o}`]=t}return{...n,...s}}function u(...e){return e.filter(Boolean).join(" ")}const b="_text_18l38_1",N={text:b},j=({children:e,size:s="m",as:n="span",align:a="auto",weight:o="auto",secondary:t,className:r,...l})=>i.jsx(n,{className:u(N.text,r),"data-align":a,"data-size":s,"data-weight":o,"data-secondary":t,...l,children:e});exports.Text=j;exports.classes=u;exports.cssProps=f;exports.media=p;exports.msToNum=d;exports.numToMs=m;exports.numToPx=c;exports.pxToNum=T;exports.pxToRem=x;exports.rgbToThreeColor=y;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/utils/style.ts","../src/components/Text/Text.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\n/**\n * Media query breakpoints\n */\nexport const media = {\n  desktop: 2080,\n  laptop: 1680,\n  tablet: 1040,\n  mobile: 696,\n  mobileS: 400,\n} as const;\n\n/**\n * Convert a px string to a number\n */\nexport const pxToNum = (px: string): number => Number(px.replace('px', ''));\n\n/**\n * Convert a number to a px string\n */\nexport const numToPx = (num: number): string => `${num}px`;\n\n/**\n * Convert pixel values to rem for a11y\n */\nexport const pxToRem = (px: number): string => `${px / 16}rem`;\n\n/**\n * Convert ms token values to a raw numbers for ReactTransitionGroup\n * Transition delay props\n */\nexport const msToNum = (msString: string): number => Number(msString.replace('ms', ''));\n\n/**\n * Convert a number to an ms string\n */\nexport const numToMs = (num: number): string => `${num}ms`;\n\n/**\n * Convert an rgb theme property (e.g. rgbBlack: '0 0 0')\n * to values that can be spread into a ThreeJS Color class\n */\nexport const rgbToThreeColor = (rgb: string | undefined): number[] =>\n  rgb?.split(' ').map(value => Number(value) / 255) || [];\n\n/**\n * Convert a JS object into `--` prefixed css custom properties.\n * Optionally pass a second param for normal styles\n */\nexport function cssProps(\n  props: Record<string, string | number>,\n  style: CSSProperties = {}\n): Record<string, string | number> & CSSProperties {\n  const result: Record<string, string | number> = {};\n\n  const keys = Object.keys(props);\n\n  for (const key of keys) {\n    let value: string | number = props[key];\n\n    if (typeof value === 'number' && key === 'delay') {\n      value = numToMs(value);\n    }\n\n    if (typeof value === 'number' && key !== 'opacity') {\n      value = numToPx(value);\n    }\n\n    result[`--${key}`] = value;\n  }\n\n  return { ...result, ...style };\n}\n\n/**\n * Concatenate classNames together\n */\nexport function classes(...args: (string | false | undefined | null)[]): string {\n  return args.filter(Boolean).join(' ');\n}\n","import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';\nimport { classes } from '../../utils/style';\nimport styles from './Text.module.css';\n\nexport interface TextProps extends ComponentPropsWithoutRef<'span'> {\n  children?: ReactNode;\n  size?: 's' | 'm' | 'l' | 'xl';\n  as?: ElementType;\n  align?: string;\n  weight?: string;\n  secondary?: boolean;\n}\n\nexport const Text = ({\n  children,\n  size = 'm',\n  as: Component = 'span',\n  align = 'auto',\n  weight = 'auto',\n  secondary,\n  className,\n  ...rest\n}: TextProps) => {\n  return (\n    <Component\n      className={classes(styles.text, className)}\n      data-align={align}\n      data-size={size}\n      data-weight={weight}\n      data-secondary={secondary}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["media","pxToNum","px","numToPx","num","pxToRem","msToNum","msString","numToMs","rgbToThreeColor","rgb","value","cssProps","props","style","result","keys","key","classes","args","Text","children","size","Component","align","weight","secondary","className","rest","jsx","styles"],"mappings":"kIAKaA,EAAQ,CACnB,QAAS,KACT,OAAQ,KACR,OAAQ,KACR,OAAQ,IACR,QAAS,GACX,EAKaC,EAAWC,GAAuB,OAAOA,EAAG,QAAQ,KAAM,EAAE,CAAC,EAK7DC,EAAWC,GAAwB,GAAGA,CAAG,KAKzCC,EAAWH,GAAuB,GAAGA,EAAK,EAAE,MAM5CI,EAAWC,GAA6B,OAAOA,EAAS,QAAQ,KAAM,EAAE,CAAC,EAKzEC,EAAWJ,GAAwB,GAAGA,CAAG,KAMzCK,EAAmBC,IAC9BA,GAAA,YAAAA,EAAK,MAAM,KAAK,IAAIC,GAAS,OAAOA,CAAK,EAAI,OAAQ,CAAA,EAMhD,SAASC,EACdC,EACAC,EAAuB,GAC0B,CACjD,MAAMC,EAA0C,CAAA,EAE1CC,EAAO,OAAO,KAAKH,CAAK,EAE9B,UAAWI,KAAOD,EAAM,CACtB,IAAIL,EAAyBE,EAAMI,CAAG,EAElC,OAAON,GAAU,UAAYM,IAAQ,UACvCN,EAAQH,EAAQG,CAAK,GAGnB,OAAOA,GAAU,UAAYM,IAAQ,YACvCN,EAAQR,EAAQQ,CAAK,GAGvBI,EAAO,KAAKE,CAAG,EAAE,EAAIN,CACvB,CAEA,MAAO,CAAE,GAAGI,EAAQ,GAAGD,CAAA,CACzB,CAKO,SAASI,KAAWC,EAAqD,CAC9E,OAAOA,EAAK,OAAO,OAAO,EAAE,KAAK,GAAG,CACtC,oCCnEaC,EAAO,CAAC,CACnB,SAAAC,EACA,KAAAC,EAAO,IACP,GAAIC,EAAY,OAChB,MAAAC,EAAQ,OACR,OAAAC,EAAS,OACT,UAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAEIC,EAAAA,IAACN,EAAA,CACC,UAAWL,EAAQY,EAAO,KAAMH,CAAS,EACzC,aAAYH,EACZ,YAAWF,EACX,cAAaG,EACb,iBAAgBC,EACf,GAAGE,EAEH,SAAAP,CAAA,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Text';
+export * from './utils/style';

package/dist/index.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+const y = {
+  desktop: 2080,
+  laptop: 1680,
+  tablet: 1040,
+  mobile: 696,
+  mobileS: 400
+}, d = (t) => Number(t.replace("px", "")), r = (t) => `${t}px`, T = (t) => `${t / 16}rem`, b = (t) => Number(t.replace("ms", "")), u = (t) => `${t}ms`, N = (t) => (t == null ? void 0 : t.split(" ").map((s) => Number(s) / 255)) || [];
+function k(t, s = {}) {
+  const n = {}, a = Object.keys(t);
+  for (const o of a) {
+    let e = t[o];
+    typeof e == "number" && o === "delay" && (e = u(e)), typeof e == "number" && o !== "opacity" && (e = r(e)), n[`--${o}`] = e;
+  }
+  return { ...n, ...s };
+}
+function i(...t) {
+  return t.filter(Boolean).join(" ");
+}
+const p = "_text_18l38_1", x = {
+  text: p
+}, $ = ({
+  children: t,
+  size: s = "m",
+  as: n = "span",
+  align: a = "auto",
+  weight: o = "auto",
+  secondary: e,
+  className: c,
+  ...m
+}) => /* @__PURE__ */ l(
+  n,
+  {
+    className: i(x.text, c),
+    "data-align": a,
+    "data-size": s,
+    "data-weight": o,
+    "data-secondary": e,
+    ...m,
+    children: t
+  }
+);
+export {
+  $ as Text,
+  i as classes,
+  k as cssProps,
+  y as media,
+  b as msToNum,
+  u as numToMs,
+  r as numToPx,
+  d as pxToNum,
+  T as pxToRem,
+  N as rgbToThreeColor
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/utils/style.ts","../src/components/Text/Text.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\n/**\n * Media query breakpoints\n */\nexport const media = {\n  desktop: 2080,\n  laptop: 1680,\n  tablet: 1040,\n  mobile: 696,\n  mobileS: 400,\n} as const;\n\n/**\n * Convert a px string to a number\n */\nexport const pxToNum = (px: string): number => Number(px.replace('px', ''));\n\n/**\n * Convert a number to a px string\n */\nexport const numToPx = (num: number): string => `${num}px`;\n\n/**\n * Convert pixel values to rem for a11y\n */\nexport const pxToRem = (px: number): string => `${px / 16}rem`;\n\n/**\n * Convert ms token values to a raw numbers for ReactTransitionGroup\n * Transition delay props\n */\nexport const msToNum = (msString: string): number => Number(msString.replace('ms', ''));\n\n/**\n * Convert a number to an ms string\n */\nexport const numToMs = (num: number): string => `${num}ms`;\n\n/**\n * Convert an rgb theme property (e.g. rgbBlack: '0 0 0')\n * to values that can be spread into a ThreeJS Color class\n */\nexport const rgbToThreeColor = (rgb: string | undefined): number[] =>\n  rgb?.split(' ').map(value => Number(value) / 255) || [];\n\n/**\n * Convert a JS object into `--` prefixed css custom properties.\n * Optionally pass a second param for normal styles\n */\nexport function cssProps(\n  props: Record<string, string | number>,\n  style: CSSProperties = {}\n): Record<string, string | number> & CSSProperties {\n  const result: Record<string, string | number> = {};\n\n  const keys = Object.keys(props);\n\n  for (const key of keys) {\n    let value: string | number = props[key];\n\n    if (typeof value === 'number' && key === 'delay') {\n      value = numToMs(value);\n    }\n\n    if (typeof value === 'number' && key !== 'opacity') {\n      value = numToPx(value);\n    }\n\n    result[`--${key}`] = value;\n  }\n\n  return { ...result, ...style };\n}\n\n/**\n * Concatenate classNames together\n */\nexport function classes(...args: (string | false | undefined | null)[]): string {\n  return args.filter(Boolean).join(' ');\n}\n","import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';\nimport { classes } from '../../utils/style';\nimport styles from './Text.module.css';\n\nexport interface TextProps extends ComponentPropsWithoutRef<'span'> {\n  children?: ReactNode;\n  size?: 's' | 'm' | 'l' | 'xl';\n  as?: ElementType;\n  align?: string;\n  weight?: string;\n  secondary?: boolean;\n}\n\nexport const Text = ({\n  children,\n  size = 'm',\n  as: Component = 'span',\n  align = 'auto',\n  weight = 'auto',\n  secondary,\n  className,\n  ...rest\n}: TextProps) => {\n  return (\n    <Component\n      className={classes(styles.text, className)}\n      data-align={align}\n      data-size={size}\n      data-weight={weight}\n      data-secondary={secondary}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["media","pxToNum","px","numToPx","num","pxToRem","msToNum","msString","numToMs","rgbToThreeColor","rgb","value","cssProps","props","style","result","keys","key","classes","args","Text","children","size","Component","align","weight","secondary","className","rest","jsx","styles"],"mappings":";;AAKO,MAAMA,IAAQ;AAAA,EACnB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX,GAKaC,IAAU,CAACC,MAAuB,OAAOA,EAAG,QAAQ,MAAM,EAAE,CAAC,GAK7DC,IAAU,CAACC,MAAwB,GAAGA,CAAG,MAKzCC,IAAU,CAACH,MAAuB,GAAGA,IAAK,EAAE,OAM5CI,IAAU,CAACC,MAA6B,OAAOA,EAAS,QAAQ,MAAM,EAAE,CAAC,GAKzEC,IAAU,CAACJ,MAAwB,GAAGA,CAAG,MAMzCK,IAAkB,CAACC,OAC9BA,KAAA,gBAAAA,EAAK,MAAM,KAAK,IAAI,CAAAC,MAAS,OAAOA,CAAK,IAAI,SAAQ,CAAA;AAMhD,SAASC,EACdC,GACAC,IAAuB,IAC0B;AACjD,QAAMC,IAA0C,CAAA,GAE1CC,IAAO,OAAO,KAAKH,CAAK;AAE9B,aAAWI,KAAOD,GAAM;AACtB,QAAIL,IAAyBE,EAAMI,CAAG;AAEtC,IAAI,OAAON,KAAU,YAAYM,MAAQ,YACvCN,IAAQH,EAAQG,CAAK,IAGnB,OAAOA,KAAU,YAAYM,MAAQ,cACvCN,IAAQR,EAAQQ,CAAK,IAGvBI,EAAO,KAAKE,CAAG,EAAE,IAAIN;AAAA,EACvB;AAEA,SAAO,EAAE,GAAGI,GAAQ,GAAGD,EAAA;AACzB;AAKO,SAASI,KAAWC,GAAqD;AAC9E,SAAOA,EAAK,OAAO,OAAO,EAAE,KAAK,GAAG;AACtC;;;GCnEaC,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAIC,IAAY;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACN;AAAA,EAAA;AAAA,IACC,WAAWL,EAAQY,EAAO,MAAMH,CAAS;AAAA,IACzC,cAAYH;AAAA,IACZ,aAAWF;AAAA,IACX,eAAaG;AAAA,IACb,kBAAgBC;AAAA,IACf,GAAGE;AAAA,IAEH,UAAAP;AAAA,EAAA;AAAA;"}

package/dist/media.css

@@ -0,0 +1,10 @@
+@custom-media --mediaDesktop (max-width: 2080px);
+@custom-media --mediaLaptop (max-width: 1680px);
+@custom-media --mediaTablet (max-width: 1040px);
+@custom-media --mediaMobile (max-width: 696px);
+@custom-media --mediaMobileLS (max-height: 696px);
+@custom-media --mediaMobileS (max-width: 400px);
+@custom-media --mediaUseMotion (prefers-reduced-motion: no-preference);
+@custom-media --mediaReduceMotion (prefers-reduced-motion: reduce);
+@custom-media --mediaTouch (pointer: coarse);
+@custom-media --mediaNoTouch (pointer: fine);

package/dist/model.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";
+//# sourceMappingURL=model.cjs.map

package/dist/model.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/model.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=model.js.map

package/dist/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/reset.css

@@ -0,0 +1,76 @@
+:root {
+  color-scheme: dark light;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(html, body) {
+  min-height: 100%;
+  width: 100%;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+:where(input, textarea, select, button) {
+  font: inherit;
+  color: inherit;
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
+  appearance: none;
+}
+
+:where(svg, img, picture, video, iframe, canvas) {
+  display: block;
+}
+
+:any-link {
+  text-decoration: none;
+}
+
+ul {
+  padding: 0;
+}
+
+body {
+  font-family: var(--fontStack);
+  font-weight: var(--fontWeightRegular);
+  background-color: rgb(var(--rgbBackground));
+  transition: background var(--durationM) ease;
+  color: var(--colorTextBody);
+  width: 100%;
+  overflow-x: hidden;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+:where(code, pre) {
+  font-family: var(--monoFontStack);
+}
+
+::selection {
+  background: rgb(var(--rgbAccent));
+  color: rgb(var(--rgbBlack));
+}
+
+:focus {
+  outline: 4px solid rgb(var(--rgbText));
+  outline-offset: 4px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}

package/dist/styles.css

@@ -0,0 +1 @@
+@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes reveal{0%{transform:scale3d(0,1,1);transform-origin:left}50%{transform:scaleZ(1);transform-origin:left}51%{transform:scaleZ(1);transform-origin:right}to{transform:scale3d(0,1,1);transform-origin:right}}._text_18l38_1{line-height:var(--lineHeightBody);color:var(--colorTextBody)}._text_18l38_1[data-size=s]{font-size:var(--fontSizeBodyS)}._text_18l38_1[data-size=m]{font-size:var(--fontSizeBodyM)}._text_18l38_1[data-size=l]{font-size:var(--fontSizeBodyL)}._text_18l38_1[data-size=xl]{font-size:var(--fontSizeBodyXL)}._text_18l38_1[data-align=auto]{text-align:inherit}._text_18l38_1[data-align=start]{text-align:start}._text_18l38_1[data-align=center]{text-align:center}._text_18l38_1[data-weight=auto]{font-weight:inherit}._text_18l38_1[data-weight=regular]{font-weight:var(--fontWeightRegular)}._text_18l38_1[data-weight=medium]{font-weight:var(--fontWeightMedium)}._text_18l38_1[data-weight=bold]{font-weight:var(--fontWeightBold)}._text_18l38_1[data-secondary=true]{color:var(--colorTextLight)}

package/dist/utils/style.d.ts

@@ -0,0 +1,46 @@
+import { CSSProperties } from 'react';
+/**
+ * Media query breakpoints
+ */
+export declare const media: {
+    readonly desktop: 2080;
+    readonly laptop: 1680;
+    readonly tablet: 1040;
+    readonly mobile: 696;
+    readonly mobileS: 400;
+};
+/**
+ * Convert a px string to a number
+ */
+export declare const pxToNum: (px: string) => number;
+/**
+ * Convert a number to a px string
+ */
+export declare const numToPx: (num: number) => string;
+/**
+ * Convert pixel values to rem for a11y
+ */
+export declare const pxToRem: (px: number) => string;
+/**
+ * Convert ms token values to a raw numbers for ReactTransitionGroup
+ * Transition delay props
+ */
+export declare const msToNum: (msString: string) => number;
+/**
+ * Convert a number to an ms string
+ */
+export declare const numToMs: (num: number) => string;
+/**
+ * Convert an rgb theme property (e.g. rgbBlack: '0 0 0')
+ * to values that can be spread into a ThreeJS Color class
+ */
+export declare const rgbToThreeColor: (rgb: string | undefined) => number[];
+/**
+ * Convert a JS object into `--` prefixed css custom properties.
+ * Optionally pass a second param for normal styles
+ */
+export declare function cssProps(props: Record<string, string | number>, style?: CSSProperties): Record<string, string | number> & CSSProperties;
+/**
+ * Concatenate classNames together
+ */
+export declare function classes(...args: (string | false | undefined | null)[]): string;

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "refract-ui",
+  "version": "0.0.0",
+  "description": "Themeable React component library — primitives, form controls, and Three.js device/carousel components.",
+  "homepage": "https://storybook.parammehta.com",
+  "repository": "https://github.com/parammehta/refract-ui.git",
+  "author": "Param Mehta <param.mehta95@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./model": {
+      "types": "./dist/model.d.ts",
+      "import": "./dist/model.js",
+      "require": "./dist/model.cjs"
+    },
+    "./carousel": {
+      "types": "./dist/carousel.d.ts",
+      "import": "./dist/carousel.js",
+      "require": "./dist/carousel.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./reset.css": "./dist/reset.css",
+    "./media.css": "./dist/media.css",
+    "./assets/*": "./dist/assets/*",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "framer-motion": "^7 || ^10 || ^11 || ^12",
+    "react": "^18.3.1 || ^19",
+    "react-dom": "^18.3.1 || ^19",
+    "three": "^0.185",
+    "three-stdlib": "^2"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    },
+    "three-stdlib": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.5",
+    "@storybook/addon-a11y": "^10.5.5",
+    "@storybook/addon-docs": "^10.5.5",
+    "@storybook/react-vite": "^10.5.5",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^20.19.43",
+    "@types/react": "~18.3",
+    "@types/react-dom": "~18.3",
+    "@types/three": "^0.185.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.39.5",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-storybook": "^10.5.5",
+    "framer-motion": "^7.10.3",
+    "fs-extra": "^10.1.0",
+    "jsdom": "^25.0.1",
+    "postcss": "^8.5.24",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-preset-env": "^7.8.3",
+    "prettier": "^3.9.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "storybook": "^10.5.5",
+    "stylelint": "^17.14.1",
+    "stylelint-config-css-modules": "^4.6.0",
+    "stylelint-config-standard": "^40.0.0",
+    "three": "^0.185.1",
+    "three-stdlib": "^2.36.1",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.4.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 9009 -h localhost",
+    "storybook": "storybook dev -p 9009 -h localhost",
+    "build": "vite build && node scripts/copy-static-css.cjs",
+    "build:storybook": "storybook build -o build-storybook && node scripts/draco-storybook.cjs && node scripts/models-storybook.cjs",
+    "lint": "eslint .",
+    "stylelint": "stylelint \"src/**/*.css\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "deploy:storybook": "aws s3 sync --delete --exclude '.DS_Store' build-storybook s3://parammehta-portfolio-storybook && node scripts/invalidate-cloudfront-storybook.cjs"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  }
+}