@kurocado-studio/bauhaus-react 1.0.0-develop.1

package/README.md

@@ -0,0 +1 @@
+Kurocado Studio Design System components

package/dist/exports.js

@@ -0,0 +1,2 @@
+import{default as x}from"react";var S=(n=>(n.GREEN="GREEN",n.ORANGE="ORANGE",n.PURPLE="PURPLE",n))(S||{}),P=(n=>(n.RED="bg-[Red]",n.BLUE="bg-[Blue]",n.YELLOW="bg-[Yellow]",n))(P||{}),E=(n=>(n.RED="border-[Red]",n.BLUE="border-[blue]",n.YELLOW="border-[Yellow]",n))(E||{}),F=(n=>(n.BASE="bg-[#F2F5F9] dark:bg-[#0F0F0F]",n.ELEVATED="#FFFFFF",n.MODAL="bg-card-root-bg-default dark:bg-[Black]",n))(F||{});function W(r,t,i,n){let l=r.getBoundingClientRect(),C=l.left+l.width/2,y=l.top+l.height/2,p=t-C,c=i-y,{magneticModeActivationRadius:m,maxDistance:u,intensity:d}=n;if(globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches)return{x:0,y:0};if(typeof m=="number"){let w=Math.hypot(p,c);if(w>u)return{x:0,y:0};let G=0;return w<m&&(G=1-w/m),{x:p*G*d,y:c*G*d}}if(Math.abs(p)<u&&Math.abs(c)<u){let w=1-Math.max(Math.abs(p),Math.abs(c))/u;return{x:p*w*d,y:c*w*d}}return{x:0,y:0}}import{PolymorphicMotionElement as M,useCursorFollow as L}from"@kurocado-studio/systemhaus-motion-react";import{motion as g}from"framer-motion";import o,{useRef as N}from"react";import{twMerge as B}from"tailwind-merge";import{PolymorphicMotionElement as v}from"@kurocado-studio/systemhaus-motion-react";import{get as H}from"lodash-es";import Y from"react";import{twMerge as D}from"tailwind-merge";function f(r){let{className:t,children:i,...n}=r;return Y.createElement(v,{className:D("grid grid-cols-12 gap-0",t),...n},i)}var b={columns:"12",gap:"0",rows:"12"},s={"aria-hidden":!0},e=(r,t)=>r==="react"?{className:t}:{class:t},R=r=>{let t={...b,...s,...e(r,"h-screen w-screen absolute top-0 left-0 right-0 bottom-0")},i={...b,...s,...e(r,"col-span-4 flex align-bottom w-full row-start-7 row-span-2 bg-[Red]")},n={...b,...s,...e(r,"w-full subgrid flex items-end")},l={...b,...s,...e(r,"w-full h-full subgrid")},C={...l},y={...b,...s,...e(r,"col-span-4 overflow-hidden w-full row-start-7 row-span-2 bg-[url('../images/circles.svg')] bg-repeat")},p={...s,...e(r,"col-span-2 row-span-8 w-full bg-[Blue]")},c={...s,...e(r,"col-span-2 col-start-7 top-0 row-span-4 row-start-9 w-full bg-[Yellow]")},m={"bg-[Yellow]":[{...s,...e(r,"row-span-4 w-1 bg-black")},{...s,...e(r,"row-span-4 w-1 row-start-5 bg-[Red]")},{...s,...e(r,"row-span-4 w-1 row-start-9 bg-[Blue]")}],"bg-[Red]":[{...s,...e(r,"col-span-4 h-1 w-full row-start-12 bg-[Blue]")},{...s,...e(r,"col-span-4 h-1 w-full row-start-12 bg-[Yellow]")},{...s,...e(r,"col-span-4 h-1 w-full row-start-12 bg-black")}],"bg-[Blue]":[{...s,...e(r,"row-span-4 col-span-12 w-full border-r-4 border-black")},{...s,...e(r,"row-span-4 col-span-12 w-full border-r-4 row-start-5 border-[Red]")},{...s,...e(r,"row-span-4 col-span-12 w-full border-r-4 row-start-9 border-[Yellow]")}]};return{blueSpanColumn:p,mainGridProps:t,redSpanColumn:i,innerRedSpanColumnGridProps:n,threeColumnsBasicColorBorders:m,blackSpanColumn:y,innerBlueSpanColumnGridProps:l,yellowSpanColumn:c,innerYellowSpanColumnGridProps:C}},k=r=>{let t={...b,...s,...e(r,"h-screen w-screen absolute top-0 left-0 right-0 bottom-0")},i={...s,...e(r,"col-span-2 col-start-3 w-full row-span-12 overflow-hidden")},n={...e(r,"col-span-6 col-start-7 w-full row-span-3 row-start-2 overflow-hidden")},l=Array.from({length:100}).map(()=>e(r,"bg-black dark:bg-white block h-0.5 mb-6"));return{blinkingYellowDots:Array.from({length:1150}).map((y,p)=>{let c=Math.random()*2,m={backgroundColor:["#FFFF00","#FF0000","#0000FF"]},u={duration:4,times:[0,.33,.66,1],repeat:1/0,repeatType:"loop",delay:c},d=!globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches;return{...p%8===0&&d&&{animate:m,transition:u},...e(r,"rounded-full inline-flex m-0.5 space-x-1 space-y-1 h-1 w-1 bg-[Yellow]")}}),mainGridProps:t,verticalSpanColumn:i,innerVerticalLines:l,innerYellowDotsContainer:n}};var a=R("react"),h=k("react");function lr(r){return o.createElement(M,{"aria-hidden":!0,...r,className:B("relative h-screen",r.className)},o.createElement(T,null),o.createElement(A,null))}function T(){let r=N(null),t=L({damping:100,stiffness:600,maxDistance:3e3,intensity:.1},r);return o.createElement(f,{...a.mainGridProps},o.createElement(g.span,{ref:r,style:{y:t.x},...a.redSpanColumn},o.createElement(f,{...a.innerRedSpanColumnGridProps},a.threeColumnsBasicColorBorders["bg-[Red]"].map((i,n)=>o.createElement("span",{key:n,...i})))),o.createElement("span",{...a.blackSpanColumn,className:B("col-span-4 row-span-2 row-start-7 w-full overflow-hidden bg-black","bg-black")}),o.createElement(g.div,{ref:r,style:{x:t.y},...a.blueSpanColumn},o.createElement("span",null,o.createElement(f,{...a.innerBlueSpanColumnGridProps},a.threeColumnsBasicColorBorders["bg-[Blue]"].map((i,n)=>o.createElement("span",{key:n,...i}))))),o.createElement(g.div,{ref:r,style:{x:t.x},...a.yellowSpanColumn},o.createElement(f,{...a.innerYellowSpanColumnGridProps},a.threeColumnsBasicColorBorders["bg-[Yellow]"].map((i,n)=>o.createElement("span",{key:n,...i})))))}function A(){let r=L({damping:200,stiffness:1e3,maxDistance:4e3,intensity:.2});return o.createElement(f,{...h.mainGridProps},o.createElement("span",{...h.verticalSpanColumn},h.innerVerticalLines.map((t,i)=>o.createElement(g.span,{ref:r.ref,style:{x:r.x,y:r.y},key:i,...t}))),o.createElement("span",{...h.innerYellowDotsContainer},h.blinkingYellowDots.map((t,i)=>o.createElement(g.span,{key:i,...t}))))}export{lr as BauhausGrid,E as BorderPrimaryColors,T as PrimaryColorGrid,P as PrimaryColors,S as SecondaryColors,F as SurfaceColors,A as VerticalLinesGrid,s as ariaHidden,R as bauhausBasicColorsGridComposer,k as bauhausVerticalLinesGridComposer,W as calculateCursorOffset,e as composeCssClassName,b as defaultGridProperties};
+//# sourceMappingURL=exports.js.map

package/dist/exports.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../react-shim.js","../src/domain/colors.ts","../src/domain/calculateCursorOffset.ts","../src/infrastructure/BauhausGrid.tsx","../src/infrastructure/Grid/Grid.tsx","../src/infrastructure/bauhausGridComposer.ts"],"sourcesContent":["export { default as React } from 'react';\n","export enum SecondaryColors {\n  GREEN = 'GREEN',\n  ORANGE = 'ORANGE',\n  PURPLE = 'PURPLE',\n}\n\nexport enum PrimaryColors {\n  RED = 'bg-[Red]',\n  BLUE = 'bg-[Blue]',\n  YELLOW = 'bg-[Yellow]',\n}\n\nexport enum BorderPrimaryColors {\n  RED = 'border-[Red]',\n  BLUE = 'border-[blue]',\n  YELLOW = 'border-[Yellow]',\n}\n\nexport enum SurfaceColors {\n  BASE = 'bg-[#F2F5F9] dark:bg-[#0F0F0F]',\n  ELEVATED = '#FFFFFF',\n  MODAL = 'bg-card-root-bg-default dark:bg-[Black]',\n}\n","export interface CursorFollowSettings {\n  damping: number;\n  stiffness: number;\n  maxDistance: number;\n  intensity: number;\n  magneticModeActivationRadius?: number;\n}\n\nexport function calculateCursorOffset(\n  element: HTMLElement,\n  mouseX: number,\n  mouseY: number,\n  settings: CursorFollowSettings,\n): { x: number; y: number } {\n  const elementRect = element.getBoundingClientRect();\n  const elementCenterX = elementRect.left + elementRect.width / 2;\n  const elementCenterY = elementRect.top + elementRect.height / 2;\n\n  const offsetXFromCenter = mouseX - elementCenterX;\n  const offsetYFromCenter = mouseY - elementCenterY;\n\n  const { magneticModeActivationRadius, maxDistance, intensity } = settings;\n\n  if (globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n    return { x: 0, y: 0 };\n  }\n\n  if (typeof magneticModeActivationRadius === 'number') {\n    const distanceToCursor = Math.hypot(offsetXFromCenter, offsetYFromCenter);\n\n    if (distanceToCursor > maxDistance) {\n      return { x: 0, y: 0 };\n    }\n\n    let proximityStrength = 0;\n    if (distanceToCursor < magneticModeActivationRadius) {\n      proximityStrength = 1 - distanceToCursor / magneticModeActivationRadius;\n    }\n\n    return {\n      x: offsetXFromCenter * proximityStrength * intensity,\n      y: offsetYFromCenter * proximityStrength * intensity,\n    };\n  }\n\n  // Smooth follow mode\n  if (\n    Math.abs(offsetXFromCenter) < maxDistance &&\n    Math.abs(offsetYFromCenter) < maxDistance\n  ) {\n    const proximityStrength =\n      1 -\n      Math.max(Math.abs(offsetXFromCenter), Math.abs(offsetYFromCenter)) /\n        maxDistance;\n\n    return {\n      x: offsetXFromCenter * proximityStrength * intensity,\n      y: offsetYFromCenter * proximityStrength * intensity,\n    };\n  }\n\n  return { x: 0, y: 0 };\n}\n","'use client';\n\nimport {\n  PolymorphicMotionElement,\n  type PolymorphicMotionProperties,\n  useCursorFollow,\n} from '@kurocado-studio/systemhaus-motion-react';\nimport { motion } from 'framer-motion';\nimport React, { useRef } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { PrimaryColors } from '../domain/colors';\nimport { Grid } from './Grid/Grid';\nimport {\n  bauhausBasicColorsGridComposer,\n  bauhausVerticalLinesGridComposer,\n} from './bauhausGridComposer';\n\nconst bauhausBasicColorsGrid = bauhausBasicColorsGridComposer('react');\nconst bauhausVerticalLinesGrid = bauhausVerticalLinesGridComposer('react');\n\nexport function BauhausGrid(\n  properties: PolymorphicMotionProperties<'div'>,\n): React.ReactNode {\n  return (\n    <PolymorphicMotionElement<'div'>\n      aria-hidden\n      {...properties}\n      className={twMerge('relative h-screen', properties.className)}\n    >\n      <PrimaryColorGrid />\n      <VerticalLinesGrid />\n    </PolymorphicMotionElement>\n  );\n}\n\nexport function PrimaryColorGrid(): React.ReactNode {\n  const spanReference = useRef<HTMLDivElement>(null);\n\n  const mainCursorFollower = useCursorFollow(\n    {\n      damping: 100,\n      stiffness: 600,\n      maxDistance: 3000,\n      intensity: 0.1,\n    },\n    spanReference,\n  );\n\n  return (\n    <Grid {...bauhausBasicColorsGrid.mainGridProps}>\n      <motion.span\n        ref={spanReference}\n        style={{ y: mainCursorFollower.x }}\n        {...bauhausBasicColorsGrid.redSpanColumn}\n      >\n        <Grid {...bauhausBasicColorsGrid.innerRedSpanColumnGridProps}>\n          {bauhausBasicColorsGrid.threeColumnsBasicColorBorders[\n            PrimaryColors.RED\n          ].map(\n            (\n              spanProperties: React.JSX.IntrinsicAttributes,\n              index: React.Key | null | undefined,\n            ) => (\n              <span key={index} {...spanProperties} />\n            ),\n          )}\n        </Grid>\n      </motion.span>\n\n      <span\n        {...bauhausBasicColorsGrid.blackSpanColumn}\n        className={twMerge(\n          'col-span-4 row-span-2 row-start-7 w-full overflow-hidden bg-black',\n          'bg-black',\n        )}\n      ></span>\n      <motion.div\n        ref={spanReference}\n        style={{ x: mainCursorFollower.y }}\n        {...bauhausBasicColorsGrid.blueSpanColumn}\n      >\n        <span>\n          <Grid {...bauhausBasicColorsGrid.innerBlueSpanColumnGridProps}>\n            {bauhausBasicColorsGrid.threeColumnsBasicColorBorders[\n              PrimaryColors.BLUE\n            ].map(\n              (\n                spanProperties: React.JSX.IntrinsicAttributes,\n                index: React.Key | null | undefined,\n              ) => (\n                <span key={index} {...spanProperties} />\n              ),\n            )}\n          </Grid>\n        </span>\n      </motion.div>\n      <motion.div\n        ref={spanReference}\n        style={{ x: mainCursorFollower.x }}\n        {...bauhausBasicColorsGrid.yellowSpanColumn}\n      >\n        <Grid {...bauhausBasicColorsGrid.innerYellowSpanColumnGridProps}>\n          {bauhausBasicColorsGrid.threeColumnsBasicColorBorders[\n            PrimaryColors.YELLOW\n          ].map(\n            (\n              spanProperties: React.JSX.IntrinsicAttributes,\n              index: React.Key | null | undefined,\n            ) => (\n              <span key={index} {...spanProperties} />\n            ),\n          )}\n        </Grid>\n      </motion.div>\n    </Grid>\n  );\n}\n\nexport function VerticalLinesGrid(): React.ReactNode {\n  const secondaryCursorFollower = useCursorFollow({\n    damping: 200,\n    stiffness: 1000,\n    maxDistance: 4000,\n    intensity: 0.2,\n  });\n\n  return (\n    <Grid {...bauhausVerticalLinesGrid.mainGridProps}>\n      <span {...bauhausVerticalLinesGrid.verticalSpanColumn}>\n        {bauhausVerticalLinesGrid.innerVerticalLines.map(\n          (\n            spanProperties: React.JSX.IntrinsicAttributes,\n            index: React.Key | null | undefined,\n          ) => {\n            return (\n              <motion.span\n                ref={secondaryCursorFollower.ref}\n                style={{\n                  x: secondaryCursorFollower.x,\n                  y: secondaryCursorFollower.y,\n                }}\n                key={index}\n                {...spanProperties}\n              />\n            );\n          },\n        )}\n      </span>\n      <span {...bauhausVerticalLinesGrid.innerYellowDotsContainer}>\n        {bauhausVerticalLinesGrid.blinkingYellowDots.map(\n          (\n            spanProperties: React.JSX.IntrinsicAttributes,\n            index: React.Key | null | undefined,\n          ) => {\n            return <motion.span key={index} {...spanProperties} />;\n          },\n        )}\n      </span>\n    </Grid>\n  );\n}\n","import {\n  PolymorphicMotionElement,\n  type PolymorphicMotionElementMap,\n  type PolymorphicMotionProperties,\n} from '@kurocado-studio/systemhaus-motion-react';\nimport { get } from 'lodash-es';\nimport React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport type GridProperties<T extends PolymorphicMotionElementMap = 'div'> =\n  PolymorphicMotionProperties<T>;\n\nexport function Grid<T extends PolymorphicMotionElementMap = 'div'>(\n  properties: React.PropsWithChildren<GridProperties<T>>,\n): React.ReactNode {\n  const { className, children, ...rest } = properties;\n\n  return (\n    //   @ts-expect-error while we sync types\n    <PolymorphicMotionElement<T>\n      className={twMerge('grid grid-cols-12 gap-0', className)}\n      {...rest}\n    >\n      {children}\n    </PolymorphicMotionElement>\n  );\n}\n\nexport function GridContainer<T extends PolymorphicMotionElementMap = 'div'>(\n  properties: React.PropsWithChildren<GridProperties<T>>,\n): React.ReactNode {\n  const gridProperties = {\n    columns: '12',\n    gap: get(properties, ['gap'], '4'),\n    rows: get(properties, ['rows'], '1'),\n  };\n\n  return (\n    <Grid<T>\n      {...properties}\n      {...gridProperties}\n      className={twMerge('relative', properties['className'])}\n    />\n  );\n}\n","import { BorderPrimaryColors, PrimaryColors } from '../domain/colors';\n\nexport interface BauhausBasicColorsGrid {\n  blueSpanColumn: Record<string, unknown>;\n  mainGridProps: Record<string, unknown>;\n  redSpanColumn: Record<string, unknown>;\n  innerRedSpanColumnGridProps: Record<string, unknown>;\n  threeColumnsBasicColorBorders: Record<\n    PrimaryColors,\n    Record<string, unknown>[]\n  >;\n  blackSpanColumn: Record<string, unknown>;\n  innerBlueSpanColumnGridProps: Record<string, unknown>;\n  yellowSpanColumn: Record<string, unknown>;\n  innerYellowSpanColumnGridProps: Record<string, unknown>;\n}\n\nexport interface BauhausVerticalLinesGrid {\n  blinkingYellowDots: Record<string, unknown>[];\n  mainGridProps: Record<string, unknown>;\n  verticalSpanColumn: Record<string, unknown>;\n  innerVerticalLines: Record<string, unknown>[];\n  innerYellowDotsContainer: Record<string, unknown>;\n}\n\nexport const defaultGridProperties = {\n  columns: '12',\n  gap: '0',\n  rows: '12',\n};\n\nexport type UIMode = 'react' | 'vue';\n\nexport const ariaHidden = {\n  'aria-hidden': true,\n};\n\nexport const composeCssClassName = (\n  uiMode: UIMode,\n  cssClass: string,\n): Record<string, string> => {\n  return uiMode === 'react'\n    ? {\n        className: cssClass,\n      }\n    : {\n        class: cssClass,\n      };\n};\n\nexport const bauhausBasicColorsGridComposer = (\n  uiMode: UIMode,\n): BauhausBasicColorsGrid => {\n  const mainGridProperties = {\n    ...defaultGridProperties,\n    ...ariaHidden,\n    ...composeCssClassName(\n      uiMode,\n      `h-screen w-screen absolute top-0 left-0 right-0 bottom-0`,\n    ),\n  };\n\n  const redSpanColumn = {\n    ...defaultGridProperties,\n    ...ariaHidden,\n    ...composeCssClassName(\n      uiMode,\n      `col-span-4 flex align-bottom w-full row-start-7 row-span-2 ${PrimaryColors.RED}`,\n    ),\n  };\n\n  const innerRedSpanColumnGridProperties = {\n    ...defaultGridProperties,\n    ...ariaHidden,\n    ...composeCssClassName(uiMode, `w-full subgrid flex items-end`),\n  };\n\n  const innerBlueSpanColumnGridProperties = {\n    ...defaultGridProperties,\n    ...ariaHidden,\n    ...composeCssClassName(uiMode, `w-full h-full subgrid`),\n  };\n\n  const innerYellowSpanColumnGridProperties = {\n    ...innerBlueSpanColumnGridProperties,\n  };\n\n  const blackSpanColumn = {\n    ...defaultGridProperties,\n    ...ariaHidden,\n    ...composeCssClassName(\n      uiMode,\n      `col-span-4 overflow-hidden w-full row-start-7 row-span-2 bg-[url(\\'../images/circles.svg\\')] bg-repeat`,\n    ),\n  };\n\n  const blueSpanColumn = {\n    ...ariaHidden,\n    ...composeCssClassName(\n      uiMode,\n      `col-span-2 row-span-8 w-full ${PrimaryColors.BLUE}`,\n    ),\n  };\n\n  const yellowSpanColumn = {\n    ...ariaHidden,\n    ...composeCssClassName(\n      uiMode,\n      `col-span-2 col-start-7 top-0 row-span-4 row-start-9 w-full ${PrimaryColors.YELLOW}`,\n    ),\n  };\n\n  const threeColumnsBasicColorBorders = {\n    [PrimaryColors.YELLOW]: [\n      {\n        ...ariaHidden,\n        ...composeCssClassName(uiMode, `row-span-4 w-1 bg-black`),\n      },\n      {\n        ...ariaHidden,\n        ...composeCssClassName(\n          uiMode,\n          `row-span-4 w-1 row-start-5 ${PrimaryColors.RED}`,\n        ),\n      },\n      {\n        ...ariaHidden,\n        ...composeCssClassName(\n          uiMode,\n          `row-span-4 w-1 row-start-9 ${PrimaryColors.BLUE}`,\n        ),\n      },\n    ],\n    [PrimaryColors.RED]: [\n      {\n        ...ariaHidden,\n        ...composeCssClassName(\n          uiMode,\n          `col-span-4 h-1 w-full row-start-12 ${PrimaryColors.BLUE}`,\n        ),\n      },\n      {\n        ...ariaHidden,\n        ...composeCssClassName(\n          uiMode,\n          `col-span-4 h-1 w-full row-start-12 ${PrimaryColors.YELLOW}`,\n        ),\n      },\n      {\n        ...ariaHidden,\n        ...composeCssClassName(\n          uiMode,\n          `col-span-4 h-1 w-full row-start-12 bg-black`,\n        ),\n      },\n    ],\n    [PrimaryColors.BLUE]: [\n      {\n        ...ariaHidden,\n        ...composeCssClassName(\n          uiMode,\n          `row-span-4 col-span-12 w-full border-r-4 border-black`,\n        ),\n      },\n      {\n        ...ariaHidden,\n        ...composeCssClassName(\n          uiMode,\n          `row-span-4 col-span-12 w-full border-r-4 row-start-5 ${BorderPrimaryColors.RED}`,\n        ),\n      },\n      {\n        ...ariaHidden,\n        ...composeCssClassName(\n          uiMode,\n          `row-span-4 col-span-12 w-full border-r-4 row-start-9 ${BorderPrimaryColors.YELLOW}`,\n        ),\n      },\n    ],\n  };\n\n  return {\n    blueSpanColumn,\n    mainGridProps: mainGridProperties,\n    redSpanColumn,\n    innerRedSpanColumnGridProps: innerRedSpanColumnGridProperties,\n    threeColumnsBasicColorBorders,\n    blackSpanColumn,\n    innerBlueSpanColumnGridProps: innerBlueSpanColumnGridProperties,\n    yellowSpanColumn,\n    innerYellowSpanColumnGridProps: innerYellowSpanColumnGridProperties,\n  };\n};\n\nexport const bauhausVerticalLinesGridComposer = (\n  uiMode: UIMode,\n): BauhausVerticalLinesGrid => {\n  const mainGridProperties = {\n    ...defaultGridProperties,\n    ...ariaHidden,\n    ...composeCssClassName(\n      uiMode,\n      `h-screen w-screen absolute top-0 left-0 right-0 bottom-0`,\n    ),\n  };\n\n  const verticalSpanColumn = {\n    ...ariaHidden,\n    ...composeCssClassName(\n      uiMode,\n      `col-span-2 col-start-3 w-full row-span-12 overflow-hidden`,\n    ),\n  };\n\n  const innerYellowDotsContainer = {\n    ...composeCssClassName(\n      uiMode,\n      'col-span-6 col-start-7 w-full row-span-3 row-start-2 overflow-hidden',\n    ),\n  };\n\n  const innerVerticalLines = Array.from({ length: 100 }).map(() => {\n    return composeCssClassName(\n      uiMode,\n      'bg-black dark:bg-white block h-0.5 mb-6',\n    );\n  });\n\n  const blinkingYellowDots = Array.from({ length: 1150 }).map((_, index) => {\n    const delay = Math.random() * 2;\n\n    const animate = {\n      backgroundColor: ['#FFFF00', '#FF0000', '#0000FF'],\n    };\n\n    const transition = {\n      duration: 4,\n      times: [0, 0.33, 0.66, 1],\n      repeat: Infinity,\n      repeatType: 'loop',\n      delay,\n    };\n\n    const prefersMotion = !globalThis.matchMedia(\n      '(prefers-reduced-motion: reduce)',\n    ).matches;\n\n    return {\n      ...(index % 8 === 0 && prefersMotion && { animate, transition }),\n      ...composeCssClassName(\n        uiMode,\n        `rounded-full inline-flex m-0.5 space-x-1 space-y-1 h-1 w-1 ${PrimaryColors.YELLOW}`,\n      ),\n    };\n  });\n\n  return {\n    blinkingYellowDots,\n    mainGridProps: mainGridProperties,\n    verticalSpanColumn,\n    innerVerticalLines,\n    innerYellowDotsContainer,\n  };\n};\n"],"mappings":"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","names":["default","SecondaryColors","PrimaryColors","BorderPrimaryColors","SurfaceColors","calculateCursorOffset","element","mouseX","mouseY","settings","elementRect","elementCenterX","elementCenterY","offsetXFromCenter","offsetYFromCenter","magneticModeActivationRadius","maxDistance","intensity","distanceToCursor","proximityStrength","PolymorphicMotionElement","useCursorFollow","motion","React","useRef","twMerge","PolymorphicMotionElement","get","React","twMerge","Grid","properties","className","children","rest","defaultGridProperties","ariaHidden","composeCssClassName","uiMode","cssClass","bauhausBasicColorsGridComposer","mainGridProperties","redSpanColumn","innerRedSpanColumnGridProperties","innerBlueSpanColumnGridProperties","innerYellowSpanColumnGridProperties","blackSpanColumn","blueSpanColumn","yellowSpanColumn","threeColumnsBasicColorBorders","bauhausVerticalLinesGridComposer","verticalSpanColumn","innerYellowDotsContainer","innerVerticalLines","_","index","delay","animate","transition","prefersMotion","bauhausBasicColorsGrid","bauhausBasicColorsGridComposer","bauhausVerticalLinesGrid","bauhausVerticalLinesGridComposer","BauhausGrid","properties","React","PolymorphicMotionElement","twMerge","PrimaryColorGrid","VerticalLinesGrid","spanReference","useRef","mainCursorFollower","useCursorFollow","Grid","motion","spanProperties","index","secondaryCursorFollower"]}

package/dist/index.d.ts

@@ -0,0 +1,85 @@
+import { PolymorphicMotionProperties } from '@kurocado-studio/systemhaus-motion-react';
+import { default as React_2 } from 'react';
+
+export declare const ariaHidden: {
+    'aria-hidden': boolean;
+};
+
+export declare interface BauhausBasicColorsGrid {
+    blueSpanColumn: Record<string, unknown>;
+    mainGridProps: Record<string, unknown>;
+    redSpanColumn: Record<string, unknown>;
+    innerRedSpanColumnGridProps: Record<string, unknown>;
+    threeColumnsBasicColorBorders: Record<PrimaryColors, Record<string, unknown>[]>;
+    blackSpanColumn: Record<string, unknown>;
+    innerBlueSpanColumnGridProps: Record<string, unknown>;
+    yellowSpanColumn: Record<string, unknown>;
+    innerYellowSpanColumnGridProps: Record<string, unknown>;
+}
+
+export declare const bauhausBasicColorsGridComposer: (uiMode: UIMode) => BauhausBasicColorsGrid;
+
+export declare function BauhausGrid(properties: PolymorphicMotionProperties<'div'>): React_2.ReactNode;
+
+export declare interface BauhausVerticalLinesGrid {
+    blinkingYellowDots: Record<string, unknown>[];
+    mainGridProps: Record<string, unknown>;
+    verticalSpanColumn: Record<string, unknown>;
+    innerVerticalLines: Record<string, unknown>[];
+    innerYellowDotsContainer: Record<string, unknown>;
+}
+
+export declare const bauhausVerticalLinesGridComposer: (uiMode: UIMode) => BauhausVerticalLinesGrid;
+
+export declare enum BorderPrimaryColors {
+    RED = "border-[Red]",
+    BLUE = "border-[blue]",
+    YELLOW = "border-[Yellow]"
+}
+
+export declare function calculateCursorOffset(element: HTMLElement, mouseX: number, mouseY: number, settings: CursorFollowSettings): {
+    x: number;
+    y: number;
+};
+
+export declare const composeCssClassName: (uiMode: UIMode, cssClass: string) => Record<string, string>;
+
+export declare interface CursorFollowSettings {
+    damping: number;
+    stiffness: number;
+    maxDistance: number;
+    intensity: number;
+    magneticModeActivationRadius?: number;
+}
+
+export declare const defaultGridProperties: {
+    columns: string;
+    gap: string;
+    rows: string;
+};
+
+export declare function PrimaryColorGrid(): React_2.ReactNode;
+
+export declare enum PrimaryColors {
+    RED = "bg-[Red]",
+    BLUE = "bg-[Blue]",
+    YELLOW = "bg-[Yellow]"
+}
+
+export declare enum SecondaryColors {
+    GREEN = "GREEN",
+    ORANGE = "ORANGE",
+    PURPLE = "PURPLE"
+}
+
+export declare enum SurfaceColors {
+    BASE = "bg-[#F2F5F9] dark:bg-[#0F0F0F]",
+    ELEVATED = "#FFFFFF",
+    MODAL = "bg-card-root-bg-default dark:bg-[Black]"
+}
+
+export declare type UIMode = 'react' | 'vue';
+
+export declare function VerticalLinesGrid(): React_2.ReactNode;
+
+export { }

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.57.6"
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kurocado-studio/bauhaus-react",
+  "version": "1.0.0-develop.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "author": "@kurocado-studio",
+  "license": "MIT",
+  "main": "./dist/exports.js",
+  "module": "./dist/exports.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/exports.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/exports.js"
+    },
+    "./tailwind.css": {
+      "import": "./dist/exports.css",
+      "default": "./dist/exports.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:typings": "api-extractor run --local",
+    "build": "rm -rf dist && tsup && pnpm build:typings && rm -rf dist/exports.d.ts",
+    "prepublishOnly": "node ../../scripts/strip-workspaces.js .",
+    "clean": "rm -rf .turbo node_modules dist",
+    "dev": "tsup --watch",
+    "dev:vite": "vite build --watch --mode development",
+    "vite:watch": "pnpm dev:vite",
+    "build:vite": "rm -rf dist && vite build --mode production",
+    "lint": "eslint --max-warnings=0 . --no-warn-ignored",
+    "lint:fix": "eslint --max-warnings=0 . --fix --no-warn-ignored",
+    "prettier:fix": "prettier --write . --ignore-path ../../.prettierignore",
+    "prettier:check": "prettier --check . --ignore-path ../../.prettierignore",
+    "typecheck": "tsc --noEmit --pretty"
+  },
+  "devDependencies": {
+    "@internal/config": "workspace:*"
+  },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1.3.1",
+    "framer-motion": "^12.23.22",
+    "lodash-es": "^4.17.21",
+    "react": "19",
+    "tailwind-merge": "^3.3.0",
+    "tailwind-variants": "^2.1.0"
+  }
+}