@gbgr/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 gbgr
+
+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,24 @@
+# @gbgr/react
+
+This package contains React components and hooks for the GBGR Design System.
+
+## Development Guidelines
+
+### Do not import Token JSON directly
+
+Components and hooks in this package should not directly import `tokens.json` or any derived JSON token files. Instead, consume design tokens through CSS variables (e.g., `var(--gbgr-color-primary)`) to maintain consistency and leverage the theming capabilities provided by the `@gbgr/tokens` package.
+
+## Usage
+
+### Button
+
+Make sure token CSS is loaded (e.g. via `@gbgr/css`), then:
+
+```tsx
+import { Button } from "@gbgr/react";
+import "@gbgr/react/button.css";
+
+export function Example() {
+	return <Button tone="primary">Save</Button>;
+}
+```

package/dist/accordion/Accordion.d.ts

@@ -0,0 +1,27 @@
+import { type UseAccordionProps } from "@gbgr/react-headless";
+import * as React from "react";
+export type AccordionProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> & UseAccordionProps;
+export type AccordionHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: "lg" | "md";
+};
+export declare const AccordionHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    size?: "lg" | "md";
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Accordion: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & UseAccordionProps & React.RefAttributes<HTMLDivElement>>;
+export type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    disabled?: boolean;
+};
+export declare const AccordionItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export type AccordionTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    label?: React.ReactNode;
+};
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    label?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type AccordionContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAG/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,cAAc,GAAG,IAAI,CAChC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,cAAc,CAC3B,GACA,iBAAiB,CAAA;AAMlB,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,eAAe;WAHpB,IAAI,GAAG,IAAI;wCAgBlB,CAAA;AA+BD,eAAO,MAAM,SAAS,oKA4CrB,CAAA;AAID,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,aAAa;WAJlB,MAAM;eACF,OAAO;wCAsBlB,CAAA;AAID,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACvC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,CACN,GAAG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,gBAAgB;YAHpB,KAAK,CAAC,SAAS;2CAoCtB,CAAA;AAIF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAExE,eAAO,MAAM,gBAAgB,8FAmB3B,CAAA"}

package/dist/accordion/Accordion.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAccordion } from "@gbgr/react-headless";
+import { MinusIcon, PlusIcon } from "@gbgr/icons";
+import clsx from "clsx";
+import * as React from "react";
+const AccordionContext = React.createContext(null);
+export const AccordionHeader = React.forwardRef(({ className, size = "lg", children, ...props }, ref) => {
+    return (_jsx("div", { ...props, ref: ref, className: clsx("gbgr-accordion__header", className), "data-size": size, children: _jsx("h2", { className: "gbgr-accordion__header-title", children: children }) }));
+});
+AccordionHeader.displayName = "AccordionHeader";
+function useAccordionContext() {
+    const ctx = React.useContext(AccordionContext);
+    if (!ctx) {
+        throw new Error("Accordion components must be used within <Accordion />");
+    }
+    return ctx;
+}
+const AccordionItemContext = React.createContext(null);
+function useAccordionItemContext() {
+    const ctx = React.useContext(AccordionItemContext);
+    if (!ctx) {
+        throw new Error("AccordionTrigger/AccordionContent must be used within <AccordionItem />");
+    }
+    return ctx;
+}
+export const Accordion = React.forwardRef((props, ref) => {
+    const { type, value, defaultValue, onValueChange, collapsible, disabled, className, children, ...rest } = props;
+    const accordion = useAccordion({
+        type: (type ?? "single"),
+        value,
+        defaultValue,
+        onValueChange,
+        collapsible,
+        disabled,
+    });
+    const allChildren = React.Children.toArray(children);
+    const headerChild = allChildren.find((child) => {
+        return React.isValidElement(child) && child.type === AccordionHeader;
+    });
+    const contentChildren = allChildren.filter((child) => child !== headerChild);
+    return (_jsx(AccordionContext.Provider, { value: accordion, children: _jsxs("div", { ...rest, ref: ref, className: clsx("gbgr-accordion", className), "data-type": accordion.type, "data-disabled": disabled ? "" : undefined, children: [headerChild, _jsx("div", { className: "gbgr-accordion__set", children: contentChildren })] }) }));
+});
+Accordion.displayName = "Accordion";
+export const AccordionItem = React.forwardRef((props, ref) => {
+    const { value, disabled, className, children, ...rest } = props;
+    const accordion = useAccordionContext();
+    const itemProps = accordion.getItemProps({ value, disabled }, rest);
+    return (_jsx(AccordionItemContext.Provider, { value: { value, disabled }, children: _jsx("div", { ...itemProps, ref: ref, className: clsx("gbgr-accordion__item", className), children: children }) }));
+});
+AccordionItem.displayName = "AccordionItem";
+export const AccordionTrigger = React.forwardRef((props, ref) => {
+    const { className, children, label = "Q", ...rest } = props;
+    const accordion = useAccordionContext();
+    const item = useAccordionItemContext();
+    const triggerProps = accordion.getTriggerProps({ value: item.value, disabled: item.disabled }, rest);
+    return (_jsxs("button", { ...triggerProps, ref: ref, className: clsx("gbgr-accordion__trigger", className), children: [_jsxs("span", { className: "gbgr-accordion__left", children: [_jsx("span", { className: "gbgr-accordion__label", children: label }), _jsx("span", { className: "gbgr-accordion__question", children: children })] }), _jsxs("span", { className: "gbgr-accordion__icons", "aria-hidden": "true", children: [_jsx("span", { className: "gbgr-accordion__icon gbgr-accordion__icon--open", children: _jsx(MinusIcon, {}) }), _jsx("span", { className: "gbgr-accordion__icon gbgr-accordion__icon--closed", children: _jsx(PlusIcon, {}) })] })] }));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+export const AccordionContent = React.forwardRef((props, ref) => {
+    const { className, children, ...rest } = props;
+    const accordion = useAccordionContext();
+    const item = useAccordionItemContext();
+    const contentProps = accordion.getContentProps({ value: item.value }, rest);
+    return (_jsx("div", { ...contentProps, ref: ref, className: clsx("gbgr-accordion__content", className), children: _jsx("div", { className: "gbgr-accordion__content-inner", children: children }) }));
+});
+AccordionContent.displayName = "AccordionContent";

package/dist/button/Button.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type ButtonTone = "primary" | "sub" | "grey";
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type ButtonPressEvent = React.MouseEvent<HTMLButtonElement>;
+export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    type?: "button" | "submit" | "reset";
+    onPress?: (event: ButtonPressEvent) => void;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+};
+export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    type?: "button" | "submit" | "reset";
+    onPress?: (event: ButtonPressEvent) => void;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEzD,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;AAElE,MAAM,MAAM,WAAW,GAAG,IAAI,CAC7B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,CACN,GAAG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,MAAM;WARX,UAAU;WACV,UAAU;WACV,QAAQ,GAAG,QAAQ,GAAG,OAAO;cAC1B,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI;gBAC/B,KAAK,CAAC,SAAS;cACjB,KAAK,CAAC,SAAS;2CA6DzB,CAAA"}

package/dist/button/Button.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as React from "react";
+export const Button = React.forwardRef((props, ref) => {
+    const { tone = "primary", size = "md", className, type = "button", onClick, onPress, startIcon, endIcon, children, ...rest } = props;
+    const handleClick = React.useCallback((event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+            onPress?.(event);
+        }
+    }, [onClick, onPress]);
+    return (_jsxs("button", { ...rest, ref: ref, type: type, onClick: handleClick, className: clsx("gbgr-button", size === "xs"
+            ? "gbgr-button--size-xs"
+            : size === "sm"
+                ? "gbgr-button--size-sm"
+                : size === "md"
+                    ? "gbgr-button--size-md"
+                    : size === "lg"
+                        ? "gbgr-button--size-lg"
+                        : "gbgr-button--size-xl", tone === "primary"
+            ? "gbgr-button--tone-primary"
+            : tone === "sub"
+                ? "gbgr-button--tone-sub"
+                : "gbgr-button--tone-grey", className), children: [startIcon ? (_jsx("span", { className: "gbgr-button__icon", children: startIcon })) : null, children, endIcon ? _jsx("span", { className: "gbgr-button__icon", children: endIcon }) : null] }));
+});
+Button.displayName = "Button";

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export type { ButtonPressEvent, ButtonProps, ButtonSize, ButtonTone, } from "./button/Button";
+export { Button } from "./button/Button";
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, } from "./accordion/Accordion";
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, } from "./accordion/Accordion";
+export type { AccordionHeaderProps } from "./accordion/Accordion";
+export type { ModeToggleProps, ModeToggleValue } from "./mode-toggle/ModeToggle";
+export { ModeToggle } from "./mode-toggle/ModeToggle";
+export type { TextFieldProps, TextFieldState } from "./text-field/TextField";
+export { TextField } from "./text-field/TextField";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,UAAU,GACV,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,YAAY,EACX,qBAAqB,EACrB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,GACrB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACN,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,GAChB,MAAM,uBAAuB,CAAA;AAC9B,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AACjE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { Button } from "./button/Button";
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, } from "./accordion/Accordion";
+export { ModeToggle } from "./mode-toggle/ModeToggle";
+export { TextField } from "./text-field/TextField";

package/dist/mode-toggle/ModeToggle.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type ModeToggleValue = "light" | "dark";
+export type ModeToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    value?: ModeToggleValue;
+    defaultValue?: ModeToggleValue;
+    onValueChange?: (value: ModeToggleValue) => void;
+};
+export declare const ModeToggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    value?: ModeToggleValue;
+    defaultValue?: ModeToggleValue;
+    onValueChange?: (value: ModeToggleValue) => void;
+} & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ModeToggle.d.ts.map

package/dist/mode-toggle/ModeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeToggle.d.ts","sourceRoot":"","sources":["../../src/mode-toggle/ModeToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAA;AAE9C,MAAM,MAAM,eAAe,GAAG,IAAI,CACjC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,CACN,GAAG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,YAAY,CAAC,EAAE,eAAe,CAAA;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,eAAO,MAAM,UAAU;YALd,eAAe;mBACR,eAAe;oBACd,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI;2CAmChD,CAAA"}

package/dist/mode-toggle/ModeToggle.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoonIcon, SunIcon } from "@gbgr/icons";
+import { useModeToggle } from "@gbgr/react-headless";
+import clsx from "clsx";
+import * as React from "react";
+export const ModeToggle = React.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    const { value: currentValue, buttonProps } = useModeToggle(rest);
+    return (_jsxs("button", { ...buttonProps, ref: ref, className: clsx("gbgr-mode-toggle", className), children: [_jsx("span", { className: "gbgr-mode-toggle__thumb", "aria-hidden": "true" }), _jsx("span", { className: clsx("gbgr-mode-toggle__icon", "gbgr-mode-toggle__icon--light"), children: _jsx(SunIcon, {}) }), _jsx("span", { className: clsx("gbgr-mode-toggle__icon", "gbgr-mode-toggle__icon--dark"), children: _jsx(MoonIcon, {}) })] }));
+});
+ModeToggle.displayName = "ModeToggle";

package/dist/text-field/TextField.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type TextFieldState = "default" | "success" | "error";
+export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    state?: TextFieldState;
+    subText?: string;
+    subIcon?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    passwordVisible?: boolean;
+    defaultPasswordVisible?: boolean;
+    onPasswordVisibleChange?: (visible: boolean) => void;
+};
+export declare const TextField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    state?: TextFieldState;
+    subText?: string;
+    subIcon?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    passwordVisible?: boolean;
+    defaultPasswordVisible?: boolean;
+    onPasswordVisibleChange?: (visible: boolean) => void;
+} & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TextField.d.ts.map

package/dist/text-field/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/text-field/TextField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAE5D,MAAM,MAAM,cAAc,GAAG,IAAI,CAChC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACN,GAAG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,uBAAuB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACpD,CAAA;AAiBD,eAAO,MAAM,SAAS;YAxBb,cAAc;cACZ,MAAM;cACN,KAAK,CAAC,SAAS;mBACV,KAAK,CAAC,SAAS;sBACZ,OAAO;6BACA,OAAO;8BACN,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;0CAqGpD,CAAA"}

package/dist/text-field/TextField.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HideIcon, InfoCircleIcon, ShowIcon } from "@gbgr/icons";
+import { useTextField } from "@gbgr/react-headless";
+import clsx from "clsx";
+import * as React from "react";
+function SuccessIcon(props) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "1.8" }), _jsx("path", { d: "M8.5 12.3 11 14.7 15.7 9.8", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+export const TextField = React.forwardRef((props, ref) => {
+    const { state = "default", subText, subIcon, endAdornment, passwordVisible, defaultPasswordVisible, onPasswordVisibleChange, className, type = "text", disabled, ...rest } = props;
+    const { isPassword, isPasswordVisible, inputType, togglePasswordVisible } = useTextField({
+        type,
+        disabled,
+        passwordVisible,
+        defaultPasswordVisible,
+        onPasswordVisibleChange,
+    });
+    const resolvedEndAdornment = React.useMemo(() => {
+        if (endAdornment)
+            return endAdornment;
+        if (!isPassword)
+            return null;
+        return (_jsx("button", { type: "button", className: "gbgr-text-field__button", onClick: togglePasswordVisible, "aria-label": isPasswordVisible ? "Hide password" : "Show password", disabled: disabled, children: isPasswordVisible ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }));
+    }, [
+        endAdornment,
+        isPassword,
+        isPasswordVisible,
+        togglePasswordVisible,
+        disabled,
+    ]);
+    const resolvedSubIcon = subIcon ??
+        (state === "success" ? (_jsx(SuccessIcon, {})) : state === "error" ? (_jsx(InfoCircleIcon, {})) : null);
+    return (_jsxs("div", { className: clsx("gbgr-text-field", className), "data-state": state, children: [_jsxs("div", { className: "gbgr-text-field__control", children: [_jsx("input", { ...rest, ref: ref, type: inputType, disabled: disabled, className: "gbgr-text-field__input" }), resolvedEndAdornment ? (_jsx("span", { className: "gbgr-text-field__end", children: resolvedEndAdornment })) : null] }), subText ? (_jsxs("div", { className: "gbgr-text-field__sub", children: [resolvedSubIcon ? (_jsx("span", { className: "gbgr-text-field__sub-icon", "aria-hidden": "true", children: resolvedSubIcon })) : null, _jsx("span", { children: subText })] })) : null] }));
+});
+TextField.displayName = "TextField";

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@gbgr/react",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./accordion.css": "./src/accordion/accordion.css",
+    "./button.css": "./src/button/button.css",
+    "./mode-toggle.css": "./src/mode-toggle/mode-toggle.css",
+    "./text-field.css": "./src/text-field/text-field.css",
+    "./styles.css": "./src/styles.css"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "@gbgr/icons": "0.1.0",
+    "@gbgr/react-headless": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "typescript": "latest"
+  },
+  "scripts": {
+    "build": "pnpm --filter @gbgr/react-headless build && tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/accordion/Accordion.tsx

@@ -0,0 +1,207 @@
+import { useAccordion, type AccordionType, type UseAccordionProps } from "@gbgr/react-headless"
+import { MinusIcon, PlusIcon } from "@gbgr/icons"
+import clsx from "clsx"
+import * as React from "react"
+
+export type AccordionProps = Omit<
+	React.HTMLAttributes<HTMLDivElement>,
+	"onChange" | "defaultValue"
+> &
+	UseAccordionProps
+
+type AccordionContextValue = ReturnType<typeof useAccordion>
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(null)
+
+export type AccordionHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+	size?: "lg" | "md"
+}
+
+export const AccordionHeader = React.forwardRef<HTMLDivElement, AccordionHeaderProps>(
+	({ className, size = "lg", children, ...props }, ref) => {
+		return (
+			<div
+				{...props}
+				ref={ref}
+				className={clsx("gbgr-accordion__header", className)}
+				data-size={size}
+			>
+				<h2 className="gbgr-accordion__header-title">{children}</h2>
+			</div>
+		)
+	},
+)
+
+AccordionHeader.displayName = "AccordionHeader"
+
+function useAccordionContext() {
+	const ctx = React.useContext(AccordionContext)
+	if (!ctx) {
+		throw new Error("Accordion components must be used within <Accordion />")
+	}
+	return ctx
+}
+
+type AccordionItemContextValue = {
+	value: string
+	disabled?: boolean
+}
+
+const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(
+	null,
+)
+
+function useAccordionItemContext() {
+	const ctx = React.useContext(AccordionItemContext)
+	if (!ctx) {
+		throw new Error(
+			"AccordionTrigger/AccordionContent must be used within <AccordionItem />",
+		)
+	}
+	return ctx
+}
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+	(props, ref) => {
+		const {
+			type,
+			value,
+			defaultValue,
+			onValueChange,
+			collapsible,
+			disabled,
+			className,
+			children,
+			...rest
+		} = props
+
+		const accordion = useAccordion({
+			type: (type ?? "single") as AccordionType,
+			value,
+			defaultValue,
+			onValueChange,
+			collapsible,
+			disabled,
+		})
+
+		const allChildren = React.Children.toArray(children)
+		const headerChild = allChildren.find((child) => {
+			return React.isValidElement(child) && child.type === AccordionHeader
+		})
+		const contentChildren = allChildren.filter((child) => child !== headerChild)
+
+		return (
+			<AccordionContext.Provider value={accordion}>
+				<div
+					{...rest}
+					ref={ref}
+					className={clsx("gbgr-accordion", className)}
+					data-type={accordion.type}
+					data-disabled={disabled ? "" : undefined}
+				>
+					{headerChild}
+					<div className="gbgr-accordion__set">{contentChildren}</div>
+				</div>
+			</AccordionContext.Provider>
+		)
+	},
+)
+
+Accordion.displayName = "Accordion"
+
+export type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
+	value: string
+	disabled?: boolean
+}
+
+export const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+	(props, ref) => {
+		const { value, disabled, className, children, ...rest } = props
+		const accordion = useAccordionContext()
+
+		const itemProps = accordion.getItemProps({ value, disabled }, rest)
+
+		return (
+			<AccordionItemContext.Provider value={{ value, disabled }}>
+				<div
+					{...itemProps}
+					ref={ref}
+					className={clsx("gbgr-accordion__item", className)}
+				>
+					{children}
+				</div>
+			</AccordionItemContext.Provider>
+		)
+	},
+)
+
+AccordionItem.displayName = "AccordionItem"
+
+export type AccordionTriggerProps = Omit<
+	React.ButtonHTMLAttributes<HTMLButtonElement>,
+	"type"
+> & {
+	label?: React.ReactNode
+}
+
+export const AccordionTrigger = React.forwardRef<
+	HTMLButtonElement,
+	AccordionTriggerProps
+>((props, ref) => {
+	const { className, children, label = "Q", ...rest } = props
+	const accordion = useAccordionContext()
+	const item = useAccordionItemContext()
+
+	const triggerProps = accordion.getTriggerProps(
+		{ value: item.value, disabled: item.disabled },
+		rest,
+	)
+
+	return (
+		<button
+			{...triggerProps}
+			ref={ref}
+			className={clsx("gbgr-accordion__trigger", className)}
+		>
+			<span className="gbgr-accordion__left">
+				<span className="gbgr-accordion__label">{label}</span>
+				<span className="gbgr-accordion__question">{children}</span>
+			</span>
+			<span className="gbgr-accordion__icons" aria-hidden="true">
+				<span className="gbgr-accordion__icon gbgr-accordion__icon--open">
+					<MinusIcon />
+				</span>
+				<span className="gbgr-accordion__icon gbgr-accordion__icon--closed">
+					<PlusIcon />
+				</span>
+			</span>
+		</button>
+	)
+})
+
+AccordionTrigger.displayName = "AccordionTrigger"
+
+export type AccordionContentProps = React.HTMLAttributes<HTMLDivElement>
+
+export const AccordionContent = React.forwardRef<
+	HTMLDivElement,
+	AccordionContentProps
+>((props, ref) => {
+	const { className, children, ...rest } = props
+	const accordion = useAccordionContext()
+	const item = useAccordionItemContext()
+
+	const contentProps = accordion.getContentProps({ value: item.value }, rest)
+
+	return (
+		<div
+			{...contentProps}
+			ref={ref}
+			className={clsx("gbgr-accordion__content", className)}
+		>
+			<div className="gbgr-accordion__content-inner">{children}</div>
+		</div>
+	)
+})
+
+AccordionContent.displayName = "AccordionContent"