@jackbernnie/hiyf 0.1.0

package/dist/utils/grid.d.ts

@@ -0,0 +1,4 @@
+/** A single grid line: a (possibly negative) line number, `auto`, or a span. */
+export type GridLine = number | 'auto' | `span ${number}`;
+/** A `grid-column` / `grid-row` value: a single line, or `<start> / <end>`. */
+export type GridPlacement = GridLine | `${GridLine} / ${GridLine}`;

package/dist/utils/resolvers.d.ts

@@ -0,0 +1,10 @@
+import * as stylex from '@stylexjs/stylex';
+import type React from 'react';
+import type { BoxStyleProps } from './types';
+export declare const BOX_STYLE_PROP_KEYS: Set<string>;
+export interface ResolvedStyles {
+    stylexStyles: stylex.StyleXStyles[];
+    inlineStyle: React.CSSProperties;
+    responsiveCSS: string | null;
+}
+export declare function resolveBoxStyles(props: BoxStyleProps, scopeClass: string): ResolvedStyles;

package/dist/utils/resolvers.js

@@ -0,0 +1,356 @@
+import { breakpoints, spacing, backgroundColors, textColors, borderColors, borderRadii, shadows, durations, easings } from '../tokens/tokens.stylex.js';
+import { marginBottomStyles, marginLeftStyles, marginInlineStyles, marginBlockStyles, gapStyles, rowGapStyles, columnGapStyles, backgroundColorStyles, colorStyles, borderColorStyles, borderRadiusStyles, borderTopLeftRadiusStyles, borderTopRightRadiusStyles, borderBottomLeftRadiusStyles, borderBottomRightRadiusStyles, borderStyleStyles, boxShadowStyles, displayStyles, overflowStyles, overflowXStyles, overflowYStyles, flexDirectionStyles, flexWrapStyles, alignItemsStyles, alignSelfStyles, justifyContentStyles, alignContentStyles, gridAutoFlowStyles, positionStyles, transitionPropertyStyles, transitionDurationStyles, transitionTimingFunctionStyles, transitionDelayStyles, cursorStyles, pointerEventsStyles, visibilityStyles, userSelectStyles, textAlignStyles, paddingStyles, paddingTopStyles, paddingRightStyles, paddingBottomStyles, paddingLeftStyles, paddingInlineStyles, paddingBlockStyles, marginStyles, marginTopStyles, marginRightStyles, TRANSITION_PROPERTY_VALUES } from './box-styles.js';
+
+const PSEUDO_SELECTOR_MAP = {
+  hover: ":hover",
+  focus: ":focus",
+  active: ":active",
+  focusVisible: ":focus-visible",
+  focusWithin: ":focus-within"
+};
+function isPseudoState(key) {
+  return key in PSEUDO_SELECTOR_MAP;
+}
+function isResponsive(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function toKebab(str) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+const DECLARATION_ORDER = ["padding", "margin", "gap", "padding-inline", "margin-inline", "padding-block", "margin-block", "row-gap", "column-gap", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin-top", "margin-right", "margin-bottom", "margin-left", "border-width", "border-style", "border-color", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "overflow", "overflow-x", "overflow-y", "flex", "flex-direction", "flex-wrap", "flex-grow", "flex-shrink", "flex-basis", "inset", "top", "right", "bottom", "left"];
+function normalizedCssKey(key) {
+  return key.includes("-") ? key : toKebab(key);
+}
+function sortedDeclarationEntries(record) {
+  return Object.entries(record).sort(([a], [b]) => {
+    const ka = normalizedCssKey(a);
+    const kb = normalizedCssKey(b);
+    const ia = DECLARATION_ORDER.indexOf(ka);
+    const ib = DECLARATION_ORDER.indexOf(kb);
+    const pa = ia === -1 ? 1e4 : ia;
+    const pb = ib === -1 ? 1e4 : ib;
+    if (pa !== pb) return pa - pb;
+    return ka.localeCompare(kb);
+  });
+}
+function px(v) {
+  return v === 0 ? "0" : `${v}px`;
+}
+function sizeValue(v) {
+  return typeof v === "number" ? px(v) : v;
+}
+function spacingCss(token) {
+  return spacing[token];
+}
+function marginCss(token) {
+  if (token === "auto") return "auto";
+  return spacing[token];
+}
+function backgroundColorCss(token) {
+  return backgroundColors[token];
+}
+function textColorCss(token) {
+  return textColors[token];
+}
+function borderColorCss(token) {
+  return borderColors[token];
+}
+function radiusCss(token) {
+  return borderRadii[token];
+}
+function shadowCss(token) {
+  return shadows[token];
+}
+function durationCss(token) {
+  return durations[token];
+}
+function easingCss(token) {
+  return easings[token];
+}
+function transitionPropertyCss(value) {
+  return TRANSITION_PROPERTY_VALUES[value];
+}
+const FLEX_KEYWORD_MAP = {
+  start: "flex-start",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+function flexKeyword(v) {
+  return FLEX_KEYWORD_MAP[v] ?? v;
+}
+const BOX_STYLE_PROP_MAP = {
+  padding: true,
+  paddingTop: true,
+  paddingRight: true,
+  paddingBottom: true,
+  paddingLeft: true,
+  paddingHorizontal: true,
+  paddingVertical: true,
+  p: true,
+  pt: true,
+  pr: true,
+  pb: true,
+  pl: true,
+  px: true,
+  py: true,
+  margin: true,
+  marginTop: true,
+  marginRight: true,
+  marginBottom: true,
+  marginLeft: true,
+  marginHorizontal: true,
+  marginVertical: true,
+  m: true,
+  mt: true,
+  mr: true,
+  mb: true,
+  ml: true,
+  mx: true,
+  my: true,
+  gap: true,
+  rowGap: true,
+  columnGap: true,
+  g: true,
+  backgroundColor: true,
+  color: true,
+  borderColor: true,
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderWidth: true,
+  borderTopWidth: true,
+  borderRightWidth: true,
+  borderBottomWidth: true,
+  borderLeftWidth: true,
+  borderStyle: true,
+  boxShadow: true,
+  display: true,
+  overflow: true,
+  overflowX: true,
+  overflowY: true,
+  width: true,
+  height: true,
+  minWidth: true,
+  maxWidth: true,
+  minHeight: true,
+  maxHeight: true,
+  aspectRatio: true,
+  flex: true,
+  flexDirection: true,
+  flexWrap: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexBasis: true,
+  alignItems: true,
+  alignSelf: true,
+  justifyContent: true,
+  alignContent: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridColumn: true,
+  gridRow: true,
+  gridArea: true,
+  gridColumnStart: true,
+  gridColumnEnd: true,
+  gridRowStart: true,
+  gridRowEnd: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridAutoRows: true,
+  position: true,
+  top: true,
+  right: true,
+  bottom: true,
+  left: true,
+  inset: true,
+  zIndex: true,
+  transitionProperty: true,
+  transitionDuration: true,
+  transitionTimingFunction: true,
+  ease: true,
+  transitionDelay: true,
+  transform: true,
+  transformOrigin: true,
+  willChange: true,
+  opacity: true,
+  cursor: true,
+  pointerEvents: true,
+  visibility: true,
+  userSelect: true,
+  textAlign: true
+};
+const BOX_STYLE_PROP_KEYS = new Set(Object.keys(BOX_STYLE_PROP_MAP));
+function resolveBoxStyles(props, scopeClass) {
+  const sxStyles = [];
+  const inlineStyle = {};
+  const breakpointStyles = {};
+  const pseudoStyles = {};
+  function addTokenProp(styleMap, cssProp, value, transform) {
+    if (value === void 0) return;
+    if (isResponsive(value)) {
+      for (const [bp, v] of Object.entries(value)) {
+        if (v === void 0) continue;
+        if (bp === "base") {
+          const style = styleMap[v];
+          if (style) sxStyles.push(style);
+        } else if (isPseudoState(bp)) {
+          const selector = PSEUDO_SELECTOR_MAP[bp];
+          if (!pseudoStyles[selector]) pseudoStyles[selector] = {};
+          pseudoStyles[selector][cssProp] = transform(v);
+        } else {
+          const bpPx = breakpoints[bp];
+          if (bpPx !== void 0) {
+            if (!breakpointStyles[bpPx]) breakpointStyles[bpPx] = {};
+            breakpointStyles[bpPx][cssProp] = transform(v);
+          }
+        }
+      }
+    } else {
+      const style = styleMap[value];
+      if (style) sxStyles.push(style);
+    }
+  }
+  function addArbitraryProp(cssProp, value, transform) {
+    if (value === void 0) return;
+    if (isResponsive(value)) {
+      for (const [bp, v] of Object.entries(value)) {
+        if (v === void 0) continue;
+        const cssValue = transform(v);
+        if (bp === "base") {
+          if (!breakpointStyles[0]) breakpointStyles[0] = {};
+          breakpointStyles[0][cssProp] = cssValue;
+        } else if (isPseudoState(bp)) {
+          const selector = PSEUDO_SELECTOR_MAP[bp];
+          if (!pseudoStyles[selector]) pseudoStyles[selector] = {};
+          pseudoStyles[selector][cssProp] = cssValue;
+        } else {
+          const bpPx = breakpoints[bp];
+          if (bpPx !== void 0) {
+            if (!breakpointStyles[bpPx]) breakpointStyles[bpPx] = {};
+            breakpointStyles[bpPx][cssProp] = cssValue;
+          }
+        }
+      }
+    } else {
+      inlineStyle[cssProp] = transform(value);
+    }
+  }
+  addTokenProp(paddingStyles, "padding", props.padding ?? props.p, spacingCss);
+  addTokenProp(paddingTopStyles, "padding-top", props.paddingTop ?? props.pt, spacingCss);
+  addTokenProp(paddingRightStyles, "padding-right", props.paddingRight ?? props.pr, spacingCss);
+  addTokenProp(paddingBottomStyles, "padding-bottom", props.paddingBottom ?? props.pb, spacingCss);
+  addTokenProp(paddingLeftStyles, "padding-left", props.paddingLeft ?? props.pl, spacingCss);
+  addTokenProp(paddingInlineStyles, "padding-inline", props.paddingHorizontal ?? props.px, spacingCss);
+  addTokenProp(paddingBlockStyles, "padding-block", props.paddingVertical ?? props.py, spacingCss);
+  addTokenProp(marginStyles, "margin", props.margin ?? props.m, marginCss);
+  addTokenProp(marginTopStyles, "margin-top", props.marginTop ?? props.mt, marginCss);
+  addTokenProp(marginRightStyles, "margin-right", props.marginRight ?? props.mr, marginCss);
+  addTokenProp(marginBottomStyles, "margin-bottom", props.marginBottom ?? props.mb, marginCss);
+  addTokenProp(marginLeftStyles, "margin-left", props.marginLeft ?? props.ml, marginCss);
+  addTokenProp(marginInlineStyles, "margin-inline", props.marginHorizontal ?? props.mx, marginCss);
+  addTokenProp(marginBlockStyles, "margin-block", props.marginVertical ?? props.my, marginCss);
+  addTokenProp(gapStyles, "gap", props.gap ?? props.g, spacingCss);
+  addTokenProp(rowGapStyles, "row-gap", props.rowGap, spacingCss);
+  addTokenProp(columnGapStyles, "column-gap", props.columnGap, spacingCss);
+  addTokenProp(backgroundColorStyles, "background-color", props.backgroundColor, backgroundColorCss);
+  addTokenProp(colorStyles, "color", props.color, textColorCss);
+  addTokenProp(borderColorStyles, "border-color", props.borderColor, borderColorCss);
+  addTokenProp(borderRadiusStyles, "border-radius", props.borderRadius, radiusCss);
+  addTokenProp(borderTopLeftRadiusStyles, "border-top-left-radius", props.borderTopLeftRadius, radiusCss);
+  addTokenProp(borderTopRightRadiusStyles, "border-top-right-radius", props.borderTopRightRadius, radiusCss);
+  addTokenProp(borderBottomLeftRadiusStyles, "border-bottom-left-radius", props.borderBottomLeftRadius, radiusCss);
+  addTokenProp(borderBottomRightRadiusStyles, "border-bottom-right-radius", props.borderBottomRightRadius, radiusCss);
+  addArbitraryProp("borderWidth", props.borderWidth, px);
+  addArbitraryProp("borderTopWidth", props.borderTopWidth, px);
+  addArbitraryProp("borderRightWidth", props.borderRightWidth, px);
+  addArbitraryProp("borderBottomWidth", props.borderBottomWidth, px);
+  addArbitraryProp("borderLeftWidth", props.borderLeftWidth, px);
+  addTokenProp(borderStyleStyles, "border-style", props.borderStyle, (v) => v);
+  addTokenProp(boxShadowStyles, "box-shadow", props.boxShadow, shadowCss);
+  addTokenProp(displayStyles, "display", props.display, (v) => v);
+  addTokenProp(overflowStyles, "overflow", props.overflow, (v) => v);
+  addTokenProp(overflowXStyles, "overflow-x", props.overflowX, (v) => v);
+  addTokenProp(overflowYStyles, "overflow-y", props.overflowY, (v) => v);
+  addArbitraryProp("width", props.width, sizeValue);
+  addArbitraryProp("height", props.height, sizeValue);
+  addArbitraryProp("minWidth", props.minWidth, sizeValue);
+  addArbitraryProp("maxWidth", props.maxWidth, sizeValue);
+  addArbitraryProp("minHeight", props.minHeight, sizeValue);
+  addArbitraryProp("maxHeight", props.maxHeight, sizeValue);
+  addArbitraryProp("aspectRatio", props.aspectRatio, (v) => v);
+  addArbitraryProp("flex", props.flex, (v) => typeof v === "number" ? `${v} ${v} 0%` : v);
+  addTokenProp(flexDirectionStyles, "flex-direction", props.flexDirection, (v) => v);
+  addTokenProp(flexWrapStyles, "flex-wrap", props.flexWrap, (v) => v);
+  addArbitraryProp("flexGrow", props.flexGrow, (v) => v);
+  addArbitraryProp("flexShrink", props.flexShrink, (v) => v);
+  addArbitraryProp("flexBasis", props.flexBasis, sizeValue);
+  addTokenProp(alignItemsStyles, "align-items", props.alignItems, flexKeyword);
+  addTokenProp(alignSelfStyles, "align-self", props.alignSelf, flexKeyword);
+  addTokenProp(justifyContentStyles, "justify-content", props.justifyContent, flexKeyword);
+  addTokenProp(alignContentStyles, "align-content", props.alignContent, flexKeyword);
+  addArbitraryProp("gridTemplateColumns", props.gridTemplateColumns, (v) => v);
+  addArbitraryProp("gridTemplateRows", props.gridTemplateRows, (v) => v);
+  addArbitraryProp("gridTemplateAreas", props.gridTemplateAreas, (v) => v);
+  addArbitraryProp("gridColumn", props.gridColumn, (v) => v);
+  addArbitraryProp("gridRow", props.gridRow, (v) => v);
+  addArbitraryProp("gridArea", props.gridArea, (v) => v);
+  addArbitraryProp("gridColumnStart", props.gridColumnStart, (v) => v);
+  addArbitraryProp("gridColumnEnd", props.gridColumnEnd, (v) => v);
+  addArbitraryProp("gridRowStart", props.gridRowStart, (v) => v);
+  addArbitraryProp("gridRowEnd", props.gridRowEnd, (v) => v);
+  addTokenProp(gridAutoFlowStyles, "grid-auto-flow", props.gridAutoFlow, (v) => v);
+  addArbitraryProp("gridAutoColumns", props.gridAutoColumns, (v) => v);
+  addArbitraryProp("gridAutoRows", props.gridAutoRows, (v) => v);
+  addTokenProp(positionStyles, "position", props.position, (v) => v);
+  addArbitraryProp("top", props.top, sizeValue);
+  addArbitraryProp("right", props.right, sizeValue);
+  addArbitraryProp("bottom", props.bottom, sizeValue);
+  addArbitraryProp("left", props.left, sizeValue);
+  addArbitraryProp("inset", props.inset, sizeValue);
+  addArbitraryProp("zIndex", props.zIndex, (v) => v);
+  addTokenProp(transitionPropertyStyles, "transition-property", props.transitionProperty, transitionPropertyCss);
+  addTokenProp(transitionDurationStyles, "transition-duration", props.transitionDuration, durationCss);
+  addTokenProp(transitionTimingFunctionStyles, "transition-timing-function", props.transitionTimingFunction ?? props.ease, easingCss);
+  addTokenProp(transitionDelayStyles, "transition-delay", props.transitionDelay, durationCss);
+  addArbitraryProp("transform", props.transform, (v) => v);
+  addArbitraryProp("transformOrigin", props.transformOrigin, (v) => v);
+  addArbitraryProp("willChange", props.willChange, (v) => v);
+  addArbitraryProp("opacity", props.opacity, (v) => v);
+  addTokenProp(cursorStyles, "cursor", props.cursor, (v) => v);
+  addTokenProp(pointerEventsStyles, "pointer-events", props.pointerEvents, (v) => v);
+  addTokenProp(visibilityStyles, "visibility", props.visibility, (v) => v);
+  addTokenProp(userSelectStyles, "user-select", props.userSelect, (v) => v);
+  addTokenProp(textAlignStyles, "text-align", props.textAlign, (v) => v);
+  const bpKeys = Object.keys(breakpointStyles).map(Number).sort((a, b) => a - b);
+  const pseudoKeys = Object.keys(pseudoStyles);
+  let responsiveCSS = null;
+  if (bpKeys.length > 0 || pseudoKeys.length > 0) {
+    const selector = `.${scopeClass}:not(#\\#):not(#\\#):not(#\\#):not(#\\#)`;
+    const parts = [];
+    for (const bp of bpKeys) {
+      const entries = sortedDeclarationEntries(breakpointStyles[bp]).map(([k, v]) => `${normalizedCssKey(k)}: ${v}`).join("; ");
+      if (bp === 0) {
+        parts.push(`${selector} { ${entries} }`);
+      } else {
+        parts.push(`@media (min-width: ${bp}px) { ${selector} { ${entries} } }`);
+      }
+    }
+    for (const pseudo of pseudoKeys) {
+      const entries = sortedDeclarationEntries(pseudoStyles[pseudo]).map(([k, v]) => `${normalizedCssKey(k)}: ${v}`).join("; ");
+      parts.push(`${selector}${pseudo} { ${entries} }`);
+    }
+    responsiveCSS = parts.join(" ");
+  }
+  return {
+    stylexStyles: sxStyles,
+    inlineStyle,
+    responsiveCSS
+  };
+}
+
+export { BOX_STYLE_PROP_KEYS, resolveBoxStyles };

package/dist/utils/types.d.ts

@@ -0,0 +1,133 @@
+import type { BackgroundColorToken, BorderColorToken, BorderRadiusToken, BreakpointKey, DurationToken, EasingToken, ShadowToken, SpacingToken, TextColorToken } from '../tokens/tokens.stylex';
+export type PseudoState = 'hover' | 'focus' | 'active' | 'focusVisible' | 'focusWithin';
+export type ResponsiveValue<T> = T | Partial<Record<'base' | BreakpointKey | PseudoState, T>>;
+export interface SpacingProps {
+    padding?: ResponsiveValue<SpacingToken>;
+    paddingTop?: ResponsiveValue<SpacingToken>;
+    paddingRight?: ResponsiveValue<SpacingToken>;
+    paddingBottom?: ResponsiveValue<SpacingToken>;
+    paddingLeft?: ResponsiveValue<SpacingToken>;
+    paddingHorizontal?: ResponsiveValue<SpacingToken>;
+    paddingVertical?: ResponsiveValue<SpacingToken>;
+    p?: ResponsiveValue<SpacingToken>;
+    pt?: ResponsiveValue<SpacingToken>;
+    pr?: ResponsiveValue<SpacingToken>;
+    pb?: ResponsiveValue<SpacingToken>;
+    pl?: ResponsiveValue<SpacingToken>;
+    px?: ResponsiveValue<SpacingToken>;
+    py?: ResponsiveValue<SpacingToken>;
+    margin?: ResponsiveValue<SpacingToken | 'auto'>;
+    marginTop?: ResponsiveValue<SpacingToken | 'auto'>;
+    marginRight?: ResponsiveValue<SpacingToken | 'auto'>;
+    marginBottom?: ResponsiveValue<SpacingToken | 'auto'>;
+    marginLeft?: ResponsiveValue<SpacingToken | 'auto'>;
+    marginHorizontal?: ResponsiveValue<SpacingToken | 'auto'>;
+    marginVertical?: ResponsiveValue<SpacingToken | 'auto'>;
+    m?: ResponsiveValue<SpacingToken | 'auto'>;
+    mt?: ResponsiveValue<SpacingToken | 'auto'>;
+    mr?: ResponsiveValue<SpacingToken | 'auto'>;
+    mb?: ResponsiveValue<SpacingToken | 'auto'>;
+    ml?: ResponsiveValue<SpacingToken | 'auto'>;
+    mx?: ResponsiveValue<SpacingToken | 'auto'>;
+    my?: ResponsiveValue<SpacingToken | 'auto'>;
+    gap?: ResponsiveValue<SpacingToken>;
+    rowGap?: ResponsiveValue<SpacingToken>;
+    columnGap?: ResponsiveValue<SpacingToken>;
+    g?: ResponsiveValue<SpacingToken>;
+}
+export interface ColorProps {
+    backgroundColor?: ResponsiveValue<BackgroundColorToken>;
+    color?: ResponsiveValue<TextColorToken>;
+    borderColor?: ResponsiveValue<BorderColorToken>;
+}
+export interface BorderProps {
+    borderRadius?: ResponsiveValue<BorderRadiusToken>;
+    borderTopLeftRadius?: ResponsiveValue<BorderRadiusToken>;
+    borderTopRightRadius?: ResponsiveValue<BorderRadiusToken>;
+    borderBottomLeftRadius?: ResponsiveValue<BorderRadiusToken>;
+    borderBottomRightRadius?: ResponsiveValue<BorderRadiusToken>;
+    borderWidth?: ResponsiveValue<number>;
+    borderTopWidth?: ResponsiveValue<number>;
+    borderRightWidth?: ResponsiveValue<number>;
+    borderBottomWidth?: ResponsiveValue<number>;
+    borderLeftWidth?: ResponsiveValue<number>;
+    borderStyle?: ResponsiveValue<'solid' | 'dashed' | 'dotted' | 'none'>;
+}
+export interface ShadowProps {
+    boxShadow?: ResponsiveValue<ShadowToken>;
+}
+export interface LayoutProps {
+    display?: ResponsiveValue<'flex' | 'grid' | 'block' | 'inline' | 'inline-flex' | 'inline-grid' | 'inline-block' | 'none' | 'contents'>;
+    overflow?: ResponsiveValue<'hidden' | 'auto' | 'scroll' | 'visible'>;
+    overflowX?: ResponsiveValue<'hidden' | 'auto' | 'scroll' | 'visible'>;
+    overflowY?: ResponsiveValue<'hidden' | 'auto' | 'scroll' | 'visible'>;
+    width?: ResponsiveValue<string | number>;
+    height?: ResponsiveValue<string | number>;
+    minWidth?: ResponsiveValue<string | number>;
+    maxWidth?: ResponsiveValue<string | number>;
+    minHeight?: ResponsiveValue<string | number>;
+    maxHeight?: ResponsiveValue<string | number>;
+    aspectRatio?: ResponsiveValue<string>;
+}
+export interface FlexProps {
+    flex?: ResponsiveValue<number | string>;
+    flexDirection?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    flexWrap?: ResponsiveValue<'wrap' | 'nowrap' | 'wrap-reverse'>;
+    flexGrow?: ResponsiveValue<number>;
+    flexShrink?: ResponsiveValue<number>;
+    flexBasis?: ResponsiveValue<string | number>;
+    alignItems?: ResponsiveValue<'start' | 'end' | 'center' | 'baseline' | 'stretch'>;
+    alignSelf?: ResponsiveValue<'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'auto'>;
+    justifyContent?: ResponsiveValue<'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'>;
+    alignContent?: ResponsiveValue<'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch'>;
+}
+export interface GridProps {
+    gridTemplateColumns?: ResponsiveValue<string>;
+    gridTemplateRows?: ResponsiveValue<string>;
+    gridTemplateAreas?: ResponsiveValue<string>;
+    gridColumn?: ResponsiveValue<string | number>;
+    gridRow?: ResponsiveValue<string | number>;
+    gridArea?: ResponsiveValue<string>;
+    gridColumnStart?: ResponsiveValue<number | string>;
+    gridColumnEnd?: ResponsiveValue<number | string>;
+    gridRowStart?: ResponsiveValue<number | string>;
+    gridRowEnd?: ResponsiveValue<number | string>;
+    gridAutoFlow?: ResponsiveValue<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;
+    gridAutoColumns?: ResponsiveValue<string>;
+    gridAutoRows?: ResponsiveValue<string>;
+}
+export interface PositionProps {
+    position?: ResponsiveValue<'relative' | 'absolute' | 'fixed' | 'sticky' | 'static'>;
+    top?: ResponsiveValue<string | number>;
+    right?: ResponsiveValue<string | number>;
+    bottom?: ResponsiveValue<string | number>;
+    left?: ResponsiveValue<string | number>;
+    inset?: ResponsiveValue<string | number>;
+    zIndex?: ResponsiveValue<number | string>;
+}
+/**
+ * Curated `transition-property` presets. Keyword values expand to a real
+ * property list so authors don't hand-write CSS — `colors` is the common case
+ * for token-driven hover states, `common` covers most interactive surfaces.
+ */
+export type TransitionProperty = 'none' | 'all' | 'common' | 'colors' | 'opacity' | 'shadow' | 'transform';
+export interface MotionProps {
+    transitionProperty?: ResponsiveValue<TransitionProperty>;
+    transitionDuration?: ResponsiveValue<DurationToken>;
+    transitionTimingFunction?: ResponsiveValue<EasingToken>;
+    /** Alias for `transitionTimingFunction`. */
+    ease?: ResponsiveValue<EasingToken>;
+    transitionDelay?: ResponsiveValue<DurationToken>;
+    transform?: ResponsiveValue<string>;
+    transformOrigin?: ResponsiveValue<string>;
+    willChange?: ResponsiveValue<string>;
+}
+export interface VisualProps {
+    opacity?: ResponsiveValue<number>;
+    cursor?: ResponsiveValue<'pointer' | 'default' | 'not-allowed' | 'grab' | 'grabbing' | 'text' | 'move' | 'wait'>;
+    pointerEvents?: ResponsiveValue<'none' | 'auto'>;
+    visibility?: ResponsiveValue<'visible' | 'hidden'>;
+    userSelect?: ResponsiveValue<'none' | 'text' | 'all' | 'auto'>;
+    textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>;
+}
+export type BoxStyleProps = SpacingProps & ColorProps & BorderProps & ShadowProps & LayoutProps & FlexProps & GridProps & PositionProps & MotionProps & VisualProps;

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@jackbernnie/hiyf",
+  "version": "0.1.0",
+  "description": "human-in-your-face — a personal, LLM-safe design system. Forked from Polar's Orbit (Apache-2.0).",
+  "license": "Apache-2.0",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src/theme.css",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/tokens/tokens.stylex.d.ts",
+      "default": "./dist/tokens/tokens.stylex.js"
+    },
+    "./theme.css": "./src/theme.css",
+    "./styles.css": "./dist/stylex.css",
+    "./*": {
+      "types": "./dist/components/*.d.ts",
+      "default": "./dist/components/*.js"
+    }
+  },
+  "scripts": {
+    "build": "rm -rf dist && rollup -c && tsc -p tsconfig.build.json && node scripts/fix-directives.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "@hugeicons/core-free-icons": "^4.2.0",
+    "@hugeicons/react": "^1.1.6",
+    "@stylexjs/stylex": "^0.18.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.6.0",
+    "react-day-picker": "^10.0.1",
+    "react-resizable-panels": "^4.11.2",
+    "recharts": "^3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@stylexjs/rollup-plugin": "0.18.3",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "rollup": "^4.62.0",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  }
+}