@orioncactuscorp/ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 orioncactus Corp.
+
+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,273 @@
+# @orioncactuscorp/ui
+
+orioncactus 디자인 시스템의 React 19+ UI package입니다.
+
+## Install
+
+```bash
+bun add @orioncactuscorp/ui @orioncactuscorp/icons
+```
+
+앱 코드에서 아이콘을 직접 import한다면 `@orioncactuscorp/icons`를 consumer repository의 direct dependency로 함께 설치하세요. `@orioncactuscorp/ui` 컴포넌트 내부 indicator만 사용한다면 별도 작업은 필요 없습니다.
+
+## Usage
+
+```tsx
+import '@orioncactuscorp/ui/foundations.css';
+import '@orioncactuscorp/ui/styles.css';
+import { IconDefault } from '@orioncactuscorp/icons';
+import { Button, IconButton } from '@orioncactuscorp/ui';
+
+export default function Example() {
+  return (
+    <>
+      <Button>확인</Button>
+      <IconButton aria-label='기본 아이콘'>
+        <IconDefault />
+      </IconButton>
+    </>
+  );
+}
+```
+
+## Components
+
+- `SectionHeader`
+- `Button`, `TextButton`, `IconButton`, `BackgroundIconButton`
+- `ActionArea`, `ActionAreaButton`
+- `Badge`, `Background`, `Divider`, `Loading`, `Cell`, `CellItem`
+- `CheckMark`
+- `Field`, `FieldLabel`, `FieldControl`, `FieldMessage`, `FieldErrorMessage` (`vertical`/`horizontal` orientation)
+- `Fieldset`, `FieldLegend`, `FieldsetContent`, `FieldGroup`
+- `Checkbox`, `Radio`, `Switch`
+- `TextInput`, `TextInputContent`
+- `TextArea`, `TextAreaContent`
+- `Select`, `SelectContent`
+- `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuItem`, `MenuSeparator`
+- `Alert`, `AlertRoot`, `AlertContent`, `AlertHeading`, `AlertDescription`, `AlertActionArea`, `AlertAction`
+- `Accordion`, `AccordionItem`, `AccordionSummary`, `AccordionDetails`, `AccordionDescription`, `AccordionContent`
+- `Modal`, `ModalRoot`, `ModalTrigger`, `ModalContent`, `ModalHeader`, `ModalBody`, `ModalFooter`, `ModalClose`
+- `TooltipProvider`, `TooltipRoot`, `TooltipTrigger`, `TooltipContent`
+- `ScrollArea`, `ScrollAreaContainer`
+- `SvgIcon`, `Interaction`
+
+## Exports
+
+- `@orioncactuscorp/ui`
+- `@orioncactuscorp/ui/foundations.css`
+- `@orioncactuscorp/ui/reset.css`
+- `@orioncactuscorp/ui/styles.css`
+- `@orioncactuscorp/ui/scss/*`
+- `@orioncactuscorp/ui/scss/foundations/responsive.config`
+- `@orioncactuscorp/ui/utils/spring`
+- `@orioncactuscorp/ui/utils/motion`
+- `@orioncactuscorp/ui/react/spring`
+- `@orioncactuscorp/ui/react/motion`
+
+## Icons
+
+`@orioncactuscorp/ui`는 `@orioncactuscorp/icons`를 dependency로 사용합니다. `Checkbox`, `Radio`, `Select`, `Accordion`, `ModalClose` 같은 컴포넌트 내부 indicator를 별도 설정 없이 렌더링합니다.
+
+앱 코드에서 아이콘을 직접 사용할 때는 `@orioncactuscorp/icons`에서 import합니다.
+
+```tsx
+import { IconClose, IconDefault } from '@orioncactuscorp/icons';
+```
+
+`@orioncactuscorp/ui`는 앱 코드용 icon export를 제공하지 않습니다.
+
+아이콘 세트를 나중에 교체할 계획이 있으면, 컴포넌트마다 직접 import하지 말고 앱 내부 icon registry를 거쳐 import하세요.
+
+## Semantic Motion
+
+SCSS consumer는 `oc-motion`으로 transition을 intent 기준으로 작성합니다. `feedback`, `reveal`, `move` 같은 의미를 선택하면 `oc-motion`이 duration token, spring profile, reduced-motion 정책을 함께 적용합니다.
+
+```scss
+@use '@orioncactuscorp/ui/scss/mixins/motion' as *;
+
+.button {
+  @include oc-motion((background-color, color), feedback);
+}
+
+.popover {
+  @include oc-motion((opacity, transform), reveal);
+}
+```
+
+일반 컴포넌트와 consumer SCSS에서는 `oc-motion`을 우선 사용하고, 직접 spring parameter를 설계해야 하는 고급 케이스에서만 `oc-spring`을 사용합니다. intent, phase, pace, reduced-motion policy, token override 기준은 [docs/oc-motion.md](https://github.com/orioncactuscorp/orioncactus-ui/blob/main/docs/oc-motion.md)를 참고하세요.
+
+## Spring Motion
+
+SCSS에서는 iOS spring의 perceptual duration 기준으로 low-level transition을 작성할 수 있습니다. helper는 실제 CSS duration을 감쇠 settling duration으로 출력합니다.
+
+```scss
+@use '@orioncactuscorp/ui/scss/spring' as *;
+
+.box {
+  transition: oc-spring(transform, 0.5s, snappy);
+}
+
+.custom {
+  transition: oc-spring(transform, 0.5s, snappy, 0.1);
+}
+
+.menu {
+  transition: oc-spring(
+    (
+      opacity: (
+        0.3s,
+        snappy,
+      ),
+      transform: (
+        0.3s,
+        snappy,
+        0.1,
+      ),
+    )
+  );
+}
+```
+
+property별 tuple은 `(duration, preset, extra-bounce, delay, samples)` 순서입니다. physical spring과 고급 옵션은 named map을 사용합니다. 자세한 사용법과 Sass named argument 주의점은 [docs/spring.md](https://github.com/orioncactuscorp/orioncactus-ui/blob/main/docs/spring.md)를 참고하세요.
+
+TS 런타임에서는 subpath util을 사용합니다.
+
+```ts
+import {
+  createSpringAnimator,
+  ocSpring,
+} from '@orioncactuscorp/ui/utils/spring';
+
+const spring = ocSpring.snappy({ duration: 0.5, extraBounce: 0.1 });
+
+spring.settlingDuration; // 실제 CSS transition duration
+spring.timingFunction; // linear(...) easing
+
+const animator = createSpringAnimator({
+  value: { x: 0, y: 0 },
+  target: { x: 120, y: 80 },
+  spring,
+  onUpdate: value => {
+    element.style.transform = `translate(${value.x}px, ${value.y}px)`;
+  },
+});
+
+animator.setTarget({ x: 240, y: 120 }); // 현재 velocity를 이어받아 retarget
+```
+
+React component에서 spring 값을 렌더링해야 하면 hook subpath를 사용합니다. 일반적인 controlled target UI는 `useSpringTarget`으로 시작하고, 직접 retarget setter가 필요하면 `useSpringValue`를 사용합니다.
+
+```tsx
+import { useState } from 'react';
+import { useSpringTarget } from '@orioncactuscorp/ui/react/spring';
+import { ocSpring } from '@orioncactuscorp/ui/utils/spring';
+
+export function Follower() {
+  const [target, setTarget] = useState({ x: 120, y: 80 });
+  const position = useSpringTarget(target, {
+    value: { x: 0, y: 0 },
+    spring: ocSpring.snappy({ duration: 0.5 }),
+  });
+
+  return (
+    <button
+      type='button'
+      style={{
+        transform: `translate3d(${position.value.x}px, ${position.value.y}px, 0)`,
+      }}
+      onClick={() => setTarget({ x: 240, y: 120 })}
+    >
+      이동
+    </button>
+  );
+}
+```
+
+runtime reveal이나 height motion이 필요한 React component에서는 `react/motion` subpath를 사용합니다. 이 layer는 `utils/motion`의 intent/phase/pace/reduced-motion 정책을 해석한 뒤 low-level `ocSpring` animator에 연결합니다.
+
+```tsx
+import { MotionReveal } from '@orioncactuscorp/ui/react/motion';
+import { ocMotion } from '@orioncactuscorp/ui/utils/motion';
+
+const motion = ocMotion.resolve({
+  intent: 'reveal',
+  phase: 'enter',
+  pace: 'normal',
+});
+
+export function Panel({ open, children }) {
+  return (
+    <MotionReveal open={open} forceMount>
+      {children}
+    </MotionReveal>
+  );
+}
+```
+
+## Responsive Foundation Profile
+
+`@orioncactuscorp/ui/scss/foundations/responsive.config`는 SCSS consumer가 `typo`와 `space` responsive token 출력 방식을 선택할 때 사용합니다. mode는 공통으로 적용하고, `$oc-responsive-typo-stops`와 `$oc-responsive-space-stops`로 foundation별 active stop range를 따로 지정할 수 있습니다. `space`는 `$oc-responsive-space-profile`로 stepped 출력 profile도 바꿀 수 있습니다.
+
+- `fluid`: 기본 `fluidClamp()` 출력
+- `stepped`: active stop별 고정 token 값 출력
+- `static`: 명시 stop 또는 각 foundation의 첫 active stop으로 고정
+- `space profile`: `$oc-responsive-mode: stepped`에서 `stepped-points`로 base/media point별 target stop 출력
+
+이 설정은 compile-time SCSS profile입니다. Prebuilt `foundations.css` 또는 `styles.css` import에는 적용되지 않습니다. 예시는 [docs/responsive-foundation-profile.md](../../docs/responsive-foundation-profile.md)를 참고하세요.
+
+## VS Code CSS Variable Autocomplete
+
+package는 VS Code CSS variable autocomplete 확장이 읽을 수 있는 foundation token index를 함께 배포합니다.
+
+```text
+node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css
+```
+
+consumer repository에서 `phoenisx.cssvar` 확장을 사용할 경우 `.vscode/settings.json`에 아래 설정을 추가합니다.
+
+```json
+{
+  "cssvar.files": [
+    "./node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css"
+  ]
+}
+```
+
+이 파일은 `foundations.css`에서 생성되므로 설치된 `@orioncactuscorp/ui` package 버전의 `--oc-*` foundation token과 자동완성 목록이 함께 움직입니다. 자동완성 전용 index이므로 runtime stylesheet로 import하지 않습니다.
+
+## Agent Setup
+
+package에는 내부 Agent instruction artifact를 포함하지 않습니다. consumer repository에서 oc-ui 사용 지침을 세팅할 때는 아래 public-safe prompt를 Agent에게 붙여넣으세요.
+
+```text
+This repository uses @orioncactuscorp/ui.
+
+Set up or update this repository's agent instructions for oc-ui usage.
+
+Use the installed package and public package docs as the source of truth:
+- package.json
+- node_modules/@orioncactuscorp/ui/package.json
+- node_modules/@orioncactuscorp/ui/README.md
+- node_modules/@orioncactuscorp/icons/package.json
+- node_modules/@orioncactuscorp/icons/README.md
+
+Inspect this repository's AGENTS.md and CLAUDE.md files if they exist.
+Preserve repository-local rules.
+Do not overwrite existing project conventions.
+Report conflicts before editing instructions.
+
+Document:
+- where @orioncactuscorp/ui/foundations.css and @orioncactuscorp/ui/styles.css are imported
+- whether this repository uses prebuilt CSS or SCSS source customization
+- whether icons are imported directly from @orioncactuscorp/icons
+- which local components should prefer oc-ui primitives
+
+Do not assume access to private orioncactus agent documents.
+Do not use the latest upstream main branch as the convention source unless I explicitly ask for that comparison.
+```
+
+긴 초기 세팅 가이드는 repository 문서의 `docs/agent-setup.md`를 기준으로 관리합니다.
+
+## License
+
+MIT

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1 @@
+.oc-Accordion-module__accordion__wD27Q{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body1);display:flex;flex-direction:column;margin-top:calc(-1 * var(--oc-cell-padding));margin-bottom:calc(-1 * var(--oc-cell-padding));color:var(--oc-color-theme-label-normal);--oc-cell-padding: var(--oc-space-item-padding-small);--oc-cell-padding-inline: var(--oc-space-item-padding-medium);--oc-cell-gap: .5em;--oc-cell-icon-size: 1.375rem;--oc-cell-disabled-opacity: .28;--oc-cell-interaction-margin-inline: var(--oc-space-item-padding-xsmall);--oc-cell-interaction-radius: var(--oc-atomic-radius-small);--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal);--oc-accordion-current-divider-color: var(--oc-cell-divider-color)}.oc-Accordion-module__item__YNNr-[data-oc-divider=normal]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Accordion-module__item__YNNr-[data-oc-divider=neutral]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Accordion-module__item__YNNr-[data-oc-divider=alternative]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Accordion-module__item__YNNr-[data-oc-divider=none]{--oc-accordion-current-divider-color: transparent}.oc-Accordion-module__item__YNNr-+.oc-Accordion-module__item__YNNr-{border-block-start:1px solid var(--oc-accordion-current-divider-color)}.oc-Accordion-module__item__YNNr-[data-oc-disabled=true] .oc-Accordion-module__summary__ORyIA>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]),.oc-Accordion-module__item__YNNr-[data-oc-disabled=true] [data-oc-part=panel-inner]{opacity:var(--oc-cell-disabled-opacity)}.oc-Accordion-module__header__AYOT5{margin:0;font:inherit}.oc-Accordion-module__summary__ORyIA{position:relative;display:flex;align-items:flex-start;gap:var(--oc-cell-gap);inline-size:100%;min-inline-size:0;padding:var(--oc-cell-padding) 0;border:0;color:inherit;font:inherit;text-align:start;background:transparent;cursor:pointer;transform:scale(var(--oc-accordion-summary-press-scale, 1));-webkit-user-select:none;user-select:none;transition:border-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__summary__ORyIA{transition-property:border-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * .5);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Accordion-module__summary__ORyIA{--oc-cell-content-min-block-size: var(--oc-typo-height-body1)}.oc-Accordion-module__summary__ORyIA[data-oc-vertical-align=center]{align-items:center}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=true]{padding-inline:var(--oc-cell-padding-inline)}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=true]>[data-oc-component=interaction]{--oc-interaction-inset-x: 0;--oc-interaction-radius: 0}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=false]>[data-oc-component=interaction]{--oc-interaction-inset-x: calc(-1 * var(--oc-cell-interaction-margin-inline));--oc-interaction-radius: var(--oc-cell-interaction-radius)}.oc-Accordion-module__summary__ORyIA:focus-visible{outline:none}.oc-Accordion-module__summary__ORyIA:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Accordion-module__summary__ORyIA:hover:not(:disabled)>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Accordion-module__summary__ORyIA:active:not(:disabled){--oc-accordion-summary-press-scale: .9875}.oc-Accordion-module__summary__ORyIA:active:not(:disabled)>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Accordion-module__summary__ORyIA:disabled{cursor:not-allowed}.oc-Accordion-module__summary__ORyIA[data-oc-disabled=true]>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]){opacity:var(--oc-cell-disabled-opacity)}.oc-Accordion-module__summary__ORyIA>[data-oc-component=interaction]{border-radius:var(--oc-interaction-radius)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=leading],.oc-Accordion-module__summary__ORyIA>[data-oc-part=trailing]{position:relative;z-index:2;display:inline-flex;flex:none;align-items:center;min-block-size:var(--oc-cell-content-min-block-size);color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=leading]>[data-oc-component=svg-icon],.oc-Accordion-module__summary__ORyIA>[data-oc-part=trailing]>[data-oc-component=svg-icon]{block-size:var(--oc-cell-icon-size)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=content]{position:relative;z-index:2;display:flex;align-items:center;flex:1;min-block-size:var(--oc-cell-content-min-block-size);min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=text]{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-atom);min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=label],.oc-Accordion-module__summary__ORyIA [data-oc-part=description]{min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=description]{font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__trailing__Gnf84{justify-content:flex-end}.oc-Accordion-module__trailing__Gnf84[data-oc-rotate=true]{transform:rotate(var(--oc-accordion-chevron-rotation, 0deg));transition:transform calc(.326s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1.5) linear(0 0%,.0045 .95%,.017 1.9%,.0363 2.86%,.061 3.81%,.0902 4.76%,.1229 5.71%,.1582 6.67%,.1956 7.62%,.2343 8.57%,.2738 9.52%,.3136 10.48%,.3533 11.43%,.3927 12.38%,.4313 13.33%,.469 14.29%,.5056 15.24%,.541 16.19%,.5749 17.14%,.6074 18.1%,.6384 19.05%,.6678 20%,.6956 20.95%,.7219 21.9%,.7466 22.86%,.7697 23.81%,.7913 24.76%,.8114 25.71%,.8301 26.67%,.8474 27.62%,.8635 28.57%,.8782 29.52%,.8918 30.48%,.9043 31.43%,.9157 32.38%,.9261 33.33%,.9355 34.29%,.9441 35.24%,.9518 36.19%,.9588 37.14%,.9651 38.1%,.9707 39.05%,.9757 40%,.9802 40.95%,.9842 41.9%,.9877 42.86%,.9907 43.81%,.9934 44.76%,.9957 45.71%,.9977 46.67%,.9995 47.62%,1.0009 48.57%,1.0022 49.52%,1.0032 50.48%,1.004 51.43%,1.0047 52.38%,1.0052 53.33%,1.0056 54.29%,1.0059 55.24%,1.0061 56.19%,1.0062 57.14%,1.0063 58.1%,1.0063 59.05%,1.0062 60%,1.0061 60.95%,1.0059 61.9%,1.0057 62.86%,1.0055 63.81%,1.0053 64.76%,1.0051 65.71%,1.0048 66.67%,1.0046 67.62%,1.0044 68.57%,1.0041 69.52%,1.0039 70.48%,1.0036 71.43%,1.0034 72.38%,1.0031 73.33%,1.0029 74.29%,1.0027 75.24%,1.0025 76.19%,1.0023 77.14%,1.0021 78.1%,1.0019 79.05%,1.0018 80%,1.0016 80.95%,1.0015 81.9%,1.0013 82.86%,1.0012 83.81%,1.0011 84.76%,1.001 85.71%,1.0009 86.67%,1.0008 87.62%,1.0007 88.57%,1.0006 89.52%,1.0005 90.48%,1.0005 91.43%,1.0004 92.38%,1.0004 93.33%,1.0003 94.29%,1.0003 95.24%,1.0002 96.19%,1.0002 97.14%,1.0002 98.1%,1.0001 99.05%,1 100%)}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__trailing__Gnf84[data-oc-rotate=true]{transition:none;transform:none}}.oc-Accordion-module__details__x7mjA{min-block-size:0}.oc-Accordion-module__accordion__wD27Q[data-oc-animation=disabled] .oc-Accordion-module__summary__ORyIA,.oc-Accordion-module__accordion__wD27Q[data-oc-animation=disabled] .oc-Accordion-module__trailing__Gnf84{transition:none}.oc-Accordion-module__panelInner__YQXzI{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-small);min-block-size:0;padding-block:0 var(--oc-cell-padding);padding-inline:0}.oc-Accordion-module__item__YNNr-:has([data-oc-component=accordion-summary][data-oc-fill-width=true]) [data-oc-part=panel-inner]{padding-inline:var(--oc-cell-padding-inline)}.oc-Accordion-module__description__bKdPX{font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);margin:0;color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__content__RyBzl{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-small);min-inline-size:0}.oc-Accordion-module__normal__Fz83W{--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Accordion-module__neutral__eEyvY{--oc-cell-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Accordion-module__alternative__HdOit{--oc-cell-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Accordion-module__none__EiLem{--oc-cell-divider-color: transparent}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,320 @@
+'use client';
+import { jsx as u, jsxs as k } from "react/jsx-runtime";
+import { useRef as $, useState as E, useCallback as z, useId as J, useEffect as L, createContext as H, useContext as q } from "react";
+import Q from "@orioncactuscorp/icons/orioncactus/ChevronDownTight";
+import { MotionReveal as W } from "../../react/motion.js";
+import X from "../Interaction/Interaction.js";
+import { normalizeSlotIcon as V } from "../internal/slot.js";
+import p from "./Accordion.module.scss.js";
+const B = H(null), _ = H(
+  null
+), Y = 180;
+function P(o) {
+  const t = q(B);
+  if (!t)
+    throw new Error(`${o} must be used within Accordion.`);
+  return t;
+}
+function j(o) {
+  const t = q(_);
+  if (!t)
+    throw new Error(`${o} must be used within AccordionItem.`);
+  return t;
+}
+function S(o, t) {
+  const e = Array.from(new Set(o.filter(Boolean)));
+  return t ? e : e.slice(0, 1);
+}
+function C(...o) {
+  return o.filter(Boolean).join(" ");
+}
+function O(o, t) {
+  typeof o == "function" ? o(t) : o && (o.current = t);
+}
+function Z(o) {
+  return o ? Array.from(
+    o.querySelectorAll(
+      '[data-oc-component="accordion-summary"]:not(:disabled)'
+    )
+  ).filter((t) => t.getAttribute("aria-hidden") !== "true") : [];
+}
+function oo({
+  root: o,
+  currentTarget: t,
+  key: e,
+  loopFocus: a
+}) {
+  const m = Z(o), c = m.indexOf(t);
+  if (c < 0) return;
+  const d = m.length - 1;
+  let l = c;
+  e === "Home" ? l = 0 : e === "End" ? l = d : e === "ArrowDown" ? l = c === d ? a ? 0 : d : c + 1 : e === "ArrowUp" && (l = c === 0 ? a ? d : 0 : c - 1), m[l]?.focus();
+}
+function to(o) {
+  return o >= 2 && o <= 6;
+}
+function lo({
+  children: o,
+  className: t = "",
+  collapsible: e = !0,
+  defaultValue: a = [],
+  disabled: m = !1,
+  disableAnimation: c = !1,
+  divider: d = "alternative",
+  loopFocus: l = !0,
+  multiple: r = !0,
+  onValueChange: A,
+  ref: y,
+  value: f,
+  ...h
+}) {
+  const I = $(null), x = f !== void 0, [b, v] = E(
+    () => S(a, r)
+  ), n = S(
+    x ? f : b,
+    r
+  ), D = (i) => {
+    I.current = i, O(y, i);
+  }, R = (i) => {
+    const g = S(i, r);
+    x || v(g), A?.(g);
+  }, w = (i) => {
+    if (m) return;
+    if (n.includes(i)) {
+      if (!e) return;
+      R(n.filter((N) => N !== i));
+      return;
+    }
+    R(r ? [...n, i] : [i]);
+  };
+  return /* @__PURE__ */ u(
+    B.Provider,
+    {
+      value: {
+        value: n,
+        collapsible: e,
+        disabled: m,
+        divider: d,
+        disableAnimation: c,
+        loopFocus: l,
+        rootRef: I,
+        toggleItem: w
+      },
+      children: /* @__PURE__ */ u(
+        "div",
+        {
+          ref: D,
+          className: C(p.accordion, p[d], t),
+          ...h,
+          "data-oc-component": "accordion",
+          "data-oc-disabled": m ? "true" : void 0,
+          "data-oc-divider": d,
+          "data-oc-animation": c ? "disabled" : void 0,
+          children: o
+        }
+      )
+    }
+  );
+}
+function uo({
+  children: o,
+  className: t = "",
+  disabled: e = !1,
+  divider: a,
+  ref: m,
+  value: c,
+  ...d
+}) {
+  const l = P("AccordionItem"), r = J(), A = l.disabled || e, y = l.value.includes(c), f = a ?? l.divider, [h, I] = E(y), x = z((b) => {
+    I(
+      (v) => v === b ? v : b
+    );
+  }, []);
+  return /* @__PURE__ */ u(
+    _.Provider,
+    {
+      value: {
+        value: c,
+        open: y,
+        disabled: A,
+        divider: f,
+        summaryId: `${r}-summary`,
+        detailsId: `${r}-details`,
+        detailsPresent: h,
+        setDetailsPresent: x
+      },
+      children: /* @__PURE__ */ u(
+        "div",
+        {
+          ref: m,
+          className: C(p.item, t),
+          ...d,
+          "data-oc-component": "accordion-item",
+          "data-oc-disabled": A ? "true" : void 0,
+          "data-oc-divider": f,
+          "data-oc-state": y ? "open" : "closed",
+          children: o
+        }
+      )
+    }
+  );
+}
+function mo({
+  children: o,
+  className: t = "",
+  content: e,
+  description: a,
+  disabled: m = !1,
+  fillWidth: c = !1,
+  headingLevel: d = 3,
+  interactionVariant: l = "light",
+  leading: r,
+  onClick: A,
+  onKeyDown: y,
+  ref: f,
+  trailing: h,
+  type: I = "button",
+  verticalAlign: x = "top",
+  ...b
+}) {
+  const v = P("AccordionSummary"), n = j("AccordionSummary"), D = $(n.open), [R, w] = E(
+    () => n.open ? 180 : 0
+  ), i = n.disabled || m, g = n.open && !v.collapsible, N = `h${to(d) ? d : 3}`, U = e ?? (a ? /* @__PURE__ */ k("span", { "data-oc-part": "text", children: [
+    /* @__PURE__ */ u("span", { "data-oc-part": "label", children: o }),
+    /* @__PURE__ */ u("span", { "data-oc-part": "description", children: a })
+  ] }) : o), K = V(r), T = h === void 0 ? /* @__PURE__ */ u(Q, { size: "custom" }) : h, F = V(T), G = h === void 0 ? {
+    "--oc-accordion-chevron-rotation": `${R}deg`
+  } : void 0, M = (s) => {
+    O(f, s);
+  };
+  return L(() => {
+    D.current !== n.open && (D.current = n.open, w(
+      (s) => s + Y
+    ));
+  }, [n.open]), /* @__PURE__ */ u(N, { className: p.header, "data-oc-part": "header", children: /* @__PURE__ */ k(
+    "button",
+    {
+      ref: M,
+      className: C(p.summary, t),
+      ...b,
+      type: I,
+      disabled: i,
+      "aria-disabled": i || g ? "true" : b["aria-disabled"],
+      "aria-expanded": n.open,
+      "aria-controls": n.open || n.detailsPresent ? n.detailsId : void 0,
+      id: n.summaryId,
+      onClick: (s) => {
+        A?.(s), !(s.defaultPrevented || i || g) && v.toggleItem(n.value);
+      },
+      onKeyDown: (s) => {
+        y?.(s), !(s.defaultPrevented || i) && (s.key === "ArrowDown" || s.key === "ArrowUp" || s.key === "Home" || s.key === "End") && (s.preventDefault(), oo({
+          root: v.rootRef.current,
+          currentTarget: s.currentTarget,
+          key: s.key,
+          loopFocus: v.loopFocus
+        }));
+      },
+      "data-oc-component": "accordion-summary",
+      "data-oc-disabled": i ? "true" : void 0,
+      "data-oc-fill-width": c ? "true" : "false",
+      "data-oc-state": n.open ? "open" : "closed",
+      "data-oc-vertical-align": x,
+      children: [
+        r ? /* @__PURE__ */ u("span", { "data-oc-part": "leading", children: K }) : null,
+        /* @__PURE__ */ u("span", { "data-oc-part": "content", children: U }),
+        T ? /* @__PURE__ */ u(
+          "span",
+          {
+            className: p.trailing,
+            "data-oc-part": "trailing",
+            "data-oc-rotate": h === void 0 ? "true" : void 0,
+            style: G,
+            children: F
+          }
+        ) : null,
+        i ? null : /* @__PURE__ */ u(X, { variant: l })
+      ]
+    }
+  ) });
+}
+function fo({
+  children: o,
+  className: t = "",
+  forceMount: e = !1,
+  ref: a,
+  region: m = !1,
+  role: c,
+  ...d
+}) {
+  const l = P("AccordionDetails"), r = j("AccordionDetails"), { setDetailsPresent: A } = r, y = z(
+    (f) => {
+      O(a, f), A(f !== null);
+    },
+    [a, A]
+  );
+  return /* @__PURE__ */ u(
+    W,
+    {
+      ref: y,
+      className: C(p.details, t),
+      open: r.open,
+      forceMount: e,
+      disableAnimation: l.disableAnimation,
+      contentProps: {
+        className: p.panelInner,
+        "data-oc-part": "panel-inner"
+      },
+      ...d,
+      "aria-hidden": r.open ? void 0 : !0,
+      "aria-labelledby": r.summaryId,
+      id: r.detailsId,
+      inert: r.open ? void 0 : !0,
+      role: m ? "region" : c,
+      "data-oc-component": "accordion-details",
+      "data-oc-state": r.open ? "open" : "closed",
+      children: o
+    }
+  );
+}
+function po({
+  children: o,
+  className: t = "",
+  ref: e,
+  ...a
+}) {
+  return /* @__PURE__ */ u(
+    "p",
+    {
+      ref: e,
+      className: C(p.description, t),
+      ...a,
+      "data-oc-component": "accordion-description",
+      children: o
+    }
+  );
+}
+function Ao({
+  children: o,
+  className: t = "",
+  ref: e,
+  ...a
+}) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: e,
+      className: C(p.content, t),
+      ...a,
+      "data-oc-component": "accordion-content",
+      children: o
+    }
+  );
+}
+export {
+  Ao as AccordionContent,
+  po as AccordionDescription,
+  fo as AccordionDetails,
+  uo as AccordionItem,
+  mo as AccordionSummary,
+  lo as default
+};

package/dist/components/Accordion/Accordion.module.scss.js

@@ -0,0 +1,31 @@
+import './Accordion.css';const o = "oc-Accordion-module__accordion__wD27Q", n = "oc-Accordion-module__item__YNNr-", c = "oc-Accordion-module__summary__ORyIA", e = "oc-Accordion-module__header__AYOT5", _ = "oc-Accordion-module__trailing__Gnf84", t = "oc-Accordion-module__details__x7mjA", r = "oc-Accordion-module__panelInner__YQXzI", d = "oc-Accordion-module__description__bKdPX", i = "oc-Accordion-module__content__RyBzl", l = "oc-Accordion-module__normal__Fz83W", a = "oc-Accordion-module__neutral__eEyvY", m = "oc-Accordion-module__alternative__HdOit", s = "oc-Accordion-module__none__EiLem", u = {
+  accordion: o,
+  item: n,
+  summary: c,
+  header: e,
+  trailing: _,
+  details: t,
+  panelInner: r,
+  description: d,
+  content: i,
+  normal: l,
+  neutral: a,
+  alternative: m,
+  none: s
+};
+export {
+  o as accordion,
+  m as alternative,
+  i as content,
+  u as default,
+  d as description,
+  t as details,
+  e as header,
+  n as item,
+  a as neutral,
+  s as none,
+  l as normal,
+  r as panelInner,
+  c as summary,
+  _ as trailing
+};

package/dist/components/Accordion.d.ts

@@ -0,0 +1,6 @@
+export * from '../ui/src/components/Accordion/index'
+export {}
+import _default from '../ui/src/components/Accordion/index'
+export default _default
+export * from '../ui/src/components/Accordion/index'
+export {}

package/dist/components/Accordion.js

@@ -0,0 +1,9 @@
+import { AccordionContent as r, AccordionDescription as i, AccordionDetails as n, AccordionItem as t, AccordionSummary as d, default as e } from "./Accordion/Accordion.js";
+export {
+  r as AccordionContent,
+  i as AccordionDescription,
+  n as AccordionDetails,
+  t as AccordionItem,
+  d as AccordionSummary,
+  e as default
+};

package/dist/components/ActionArea/ActionArea.css

@@ -0,0 +1 @@
+.oc-ActionArea-module__actionArea__jnxep{position:relative;display:flex;flex-direction:column;inline-size:100%;padding:var(--oc-action-area-padding-y) var(--oc-action-area-padding-x) var(--oc-action-area-padding-bottom);--oc-action-area-padding-x: var(--oc-space-section-padding-viewport-x);--oc-action-area-padding-y: var(--oc-space-section-padding-viewport-y);--oc-action-area-padding-bottom: var(--oc-action-area-padding-y);--oc-action-area-gap: var(--oc-space-item-gap-small);--oc-action-area-actions-gap: var(--oc-space-item-gap-small);--oc-action-area-background-color: var(--oc-color-theme-background-elevated-normal)}.oc-ActionArea-module__actionArea__jnxep:before{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,transparent,var(--oc-action-area-background-color) 45%);opacity:0;content:"";pointer-events:none}.oc-ActionArea-module__actionArea__jnxep>*{position:relative;z-index:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-background=true]:before{opacity:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-has-extra=true]{border-block-start:1px solid var(--oc-color-theme-line-normal-neutral);background-color:var(--oc-action-area-background-color)}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=extra-slot]{display:flex;flex-direction:column;align-items:center;margin-block-end:calc(var(--oc-action-area-gap) + var(--oc-action-area-padding-y))}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=caption]{font-size:calc(var(--oc-typo-size-label2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label2);font-weight:var(--oc-typo-weight-label2-normal);margin:0 0 var(--oc-space-item-gap-medium);color:var(--oc-color-theme-label-alternative);text-align:center}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=actions]{display:flex;gap:var(--oc-action-area-actions-gap);min-width:0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=strong] [data-oc-part=actions],.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=cancel] [data-oc-part=actions]{flex-direction:column}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]{flex-direction:row}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button=true]{flex:1 1 0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button-variant=sub][data-oc-icon-only=true]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]{flex-direction:row;justify-content:flex-end}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]:has(>[data-oc-action-area-button-variant=sub][data-oc-icon-only=true]){justify-content:space-between;inline-size:100%}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-row]{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-item-gap-medium);min-width:0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-slot]{display:flex;align-items:center;flex:1 1 auto;min-width:0}.oc-ActionArea-module__actionButton__fKHJQ{min-width:0}.oc-ActionArea-module__actionButton__fKHJQ[data-oc-component=text-button]{flex:0 0 auto;inline-size:fit-content;align-self:center}