@gbgr/react 0.1.0

package/src/accordion/accordion.css

@@ -0,0 +1,178 @@
+.gbgr-accordion {
+	--gbgr-accordion-set-max-width: 1600px;
+	--gbgr-accordion-row-max-width: 920px;
+
+	width: 100%;
+	border-radius: 20px;
+	background: var(--border-depth0);
+	padding: 40px;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	align-items: center;
+}
+
+.gbgr-accordion[data-disabled] {
+	opacity: 0.7;
+}
+
+.gbgr-accordion__header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+}
+
+.gbgr-accordion__header-title {
+	margin: 0;
+	text-align: center;
+	font-family: var(--font-families-pretendard, Pretendard);
+	font-weight: var(--font-weights-pretendard-0);
+	line-height: 1.5;
+	letter-spacing: 0;
+	color: var(--color-global-grey-800);
+}
+
+.gbgr-accordion__header[data-size="lg"] .gbgr-accordion__header-title {
+	font-size: 32px;
+}
+
+.gbgr-accordion__header[data-size="md"] .gbgr-accordion__header-title {
+	font-size: 28px;
+}
+
+.gbgr-accordion__set {
+	width: 100%;
+	max-width: var(--gbgr-accordion-set-max-width);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border-top: 1px solid var(--border-depth2);
+	border-bottom: 1px solid var(--border-depth2);
+}
+
+.gbgr-accordion__item {
+	width: 100%;
+	max-width: var(--gbgr-accordion-row-max-width);
+	padding: 12px 20px;
+	border-bottom: 1px solid var(--border-depth2);
+}
+
+.gbgr-accordion__item:last-child {
+	border-bottom: 0;
+}
+
+.gbgr-accordion__trigger {
+	appearance: none;
+	width: 100%;
+	border: 0;
+	background: transparent;
+	display: inline-flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-5);
+	cursor: pointer;
+	color: inherit;
+	padding: 0;
+	text-align: left;
+	font-family: var(--font-families-pretendard, Pretendard);
+	font-size: 18px;
+	font-weight: var(--font-weights-pretendard-2);
+	line-height: 1.5;
+}
+
+.gbgr-accordion__left {
+	min-width: 0;
+	flex: 1 1 auto;
+	display: inline-flex;
+	align-items: flex-start;
+	gap: 6px;
+}
+
+.gbgr-accordion__label {
+	flex: 0 0 auto;
+	white-space: nowrap;
+}
+
+.gbgr-accordion__question {
+	min-width: 0;
+	flex: 0 1 494px;
+	white-space: pre-wrap;
+}
+
+.gbgr-accordion__trigger:focus-visible {
+	outline: 2px solid var(--border-active);
+	outline-offset: 2px;
+}
+
+.gbgr-accordion__trigger:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.gbgr-accordion__icons {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	flex: 0 0 auto;
+}
+
+.gbgr-accordion__icon {
+	width: 24px;
+	height: 24px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.gbgr-accordion__icon svg {
+	width: 24px;
+	height: 24px;
+	display: block;
+}
+
+.gbgr-accordion__icon--open {
+	color: var(--color-global-grey-300);
+	display: none;
+}
+
+.gbgr-accordion__icon--closed {
+	color: var(--border-depth3);
+	display: inline-flex;
+}
+
+.gbgr-accordion__trigger[data-state="open"] .gbgr-accordion__icon--open {
+	display: inline-flex;
+}
+
+.gbgr-accordion__trigger[data-state="open"] .gbgr-accordion__icon--closed {
+	display: none;
+}
+
+.gbgr-accordion__content {
+	display: grid;
+	grid-template-rows: 0fr;
+	transition: grid-template-rows 180ms ease;
+	overflow: hidden;
+}
+
+.gbgr-accordion__content[hidden] {
+	display: none;
+}
+
+.gbgr-accordion__content[data-state="open"] {
+	grid-template-rows: 1fr;
+}
+
+.gbgr-accordion__content-inner {
+	min-height: 0;
+	padding: 12px 0 12px 20px;
+	font-family: var(--font-families-pretendard, Pretendard);
+	font-size: 16px;
+	font-weight: var(--font-weights-pretendard-2);
+	line-height: 1.5;
+	color: var(--color-global-grey-300);
+}

package/src/button/Button.tsx

@@ -0,0 +1,81 @@
+import clsx from "clsx"
+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 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	(props, ref) => {
+		const {
+			tone = "primary",
+			size = "md",
+			className,
+			type = "button",
+			onClick,
+			onPress,
+			startIcon,
+			endIcon,
+			children,
+			...rest
+		} = props
+
+		const handleClick = React.useCallback(
+			(event: React.MouseEvent<HTMLButtonElement>) => {
+				onClick?.(event)
+				if (!event.defaultPrevented) {
+					onPress?.(event)
+				}
+			},
+			[onClick, onPress],
+		)
+
+		return (
+			<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,
+				)}
+			>
+				{startIcon ? (
+					<span className="gbgr-button__icon">{startIcon}</span>
+				) : null}
+				{children}
+				{endIcon ? <span className="gbgr-button__icon">{endIcon}</span> : null}
+			</button>
+		)
+	},
+)
+
+Button.displayName = "Button"

package/src/button/button.css

@@ -0,0 +1,140 @@
+.gbgr-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-2);
+	border: 0;
+	border-radius: var(--radius-full);
+	font-weight: var(--font-weights-pretendard-2);
+	cursor: pointer;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	transition:
+		background-color 120ms ease,
+		color 120ms ease,
+		transform 60ms ease;
+}
+
+.gbgr-button__icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	flex: 0 0 auto;
+	color: currentColor;
+}
+
+.gbgr-button__icon > svg {
+	width: 16px;
+	height: 16px;
+	display: block;
+}
+
+/* Docs/demo only: simple circle placeholder inside the icon slot */
+.gbgr-button__icon-placeholder {
+	width: 14px;
+	height: 14px;
+	border-radius: var(--radius-full);
+	border: 2px solid currentColor;
+}
+
+.gbgr-button:focus-visible {
+	outline: 2px solid var(--border-active);
+	outline-offset: 2px;
+}
+
+.gbgr-button:disabled {
+	cursor: not-allowed;
+}
+
+.gbgr-button--size-xs {
+	min-height: 32px;
+	padding: var(--spacing-2) var(--spacing-3);
+	font-size: var(--font-size-2);
+}
+
+.gbgr-button--size-sm {
+	min-height: 36px;
+	padding: var(--spacing-2) var(--spacing-4);
+	font-size: var(--font-size-3);
+}
+
+.gbgr-button--size-md {
+	min-height: 40px;
+	padding: var(--spacing-3) var(--spacing-4);
+	font-size: var(--font-size-3);
+}
+
+.gbgr-button--size-lg {
+	min-height: 44px;
+	padding: var(--spacing-3) var(--spacing-5);
+	font-size: var(--font-size-4);
+}
+
+.gbgr-button--size-xl {
+	min-height: 54px;
+	padding: var(--spacing-4) var(--spacing-6);
+	font-size: var(--font-size-5);
+}
+
+.gbgr-button--tone-primary {
+	background: var(--color-component-button-base-bg-primary-default);
+	color: var(--color-component-button-base-text-primary-default);
+}
+
+.gbgr-button--tone-primary:hover:not(:disabled),
+.gbgr-button--tone-primary[data-state="hover"]:not(:disabled) {
+	background: var(--color-component-button-base-bg-primary-hover);
+}
+
+.gbgr-button--tone-primary:active:not(:disabled),
+.gbgr-button--tone-primary[data-state="pressed"]:not(:disabled) {
+	background: var(--color-component-button-base-bg-primary-pressed);
+}
+
+.gbgr-button--tone-primary:disabled {
+	background: var(--color-component-button-base-bg-primary-disabled);
+	color: var(--color-component-button-base-text-primary-disabled);
+}
+
+.gbgr-button--tone-sub {
+	background: var(--color-component-button-base-bg-sub-default);
+	color: var(--color-component-button-base-text-sub-default);
+}
+
+.gbgr-button--tone-sub:hover:not(:disabled),
+.gbgr-button--tone-sub[data-state="hover"]:not(:disabled) {
+	background: var(--color-component-button-base-bg-sub-hover);
+}
+
+.gbgr-button--tone-sub:active:not(:disabled),
+.gbgr-button--tone-sub[data-state="pressed"]:not(:disabled) {
+	background: var(--color-component-button-base-bg-sub-pressed);
+	color: var(--color-component-button-base-text-sub-pressed);
+}
+
+.gbgr-button--tone-sub:disabled {
+	background: var(--color-component-button-base-bg-sub-default);
+	color: var(--color-component-button-base-text-sub-disabled);
+}
+
+.gbgr-button--tone-grey {
+	background: var(--color-component-button-base-bg-grey-default);
+	color: var(--color-component-button-base-text-grey-default);
+}
+
+.gbgr-button--tone-grey:hover:not(:disabled),
+.gbgr-button--tone-grey[data-state="hover"]:not(:disabled) {
+	background: var(--color-component-button-base-bg-grey-hover);
+}
+
+.gbgr-button--tone-grey:active:not(:disabled),
+.gbgr-button--tone-grey[data-state="pressed"]:not(:disabled) {
+	background: var(--color-component-button-base-bg-grey-pressed);
+}
+
+.gbgr-button--tone-grey:disabled {
+	background: var(--color-component-button-base-bg-grey-disabled);
+	color: var(--color-component-button-base-text-grey-disabled);
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+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"

package/src/mode-toggle/ModeToggle.tsx

@@ -0,0 +1,51 @@
+import { MoonIcon, SunIcon } from "@gbgr/icons"
+import { useModeToggle } from "@gbgr/react-headless"
+import clsx from "clsx"
+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 const ModeToggle = React.forwardRef<HTMLButtonElement, ModeToggleProps>(
+	(props, ref) => {
+		const { className, ...rest } = props
+
+		const { value: currentValue, buttonProps } = useModeToggle(rest)
+
+		return (
+			<button
+				{...buttonProps}
+				ref={ref}
+				className={clsx("gbgr-mode-toggle", className)}
+			>
+				<span className="gbgr-mode-toggle__thumb" aria-hidden="true" />
+				<span
+					className={clsx(
+						"gbgr-mode-toggle__icon",
+						"gbgr-mode-toggle__icon--light",
+					)}
+				>
+					<SunIcon />
+				</span>
+				<span
+					className={clsx(
+						"gbgr-mode-toggle__icon",
+						"gbgr-mode-toggle__icon--dark",
+					)}
+				>
+					<MoonIcon />
+				</span>
+			</button>
+		)
+	},
+)
+
+ModeToggle.displayName = "ModeToggle"

package/src/mode-toggle/mode-toggle.css

@@ -0,0 +1,92 @@
+.gbgr-mode-toggle {
+	--gbgr-mode-toggle-width: 62px;
+	--gbgr-mode-toggle-height: 30px;
+	--gbgr-mode-toggle-padding: 3px;
+	--gbgr-mode-toggle-thumb: 24px;
+	--gbgr-mode-toggle-icon: 16px;
+
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--gbgr-mode-toggle-width);
+	height: var(--gbgr-mode-toggle-height);
+	padding: 0;
+	border: 0;
+	border-radius: var(--radius-full);
+	background: var(--color-component-button-mode-change-bg);
+	cursor: pointer;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.gbgr-mode-toggle:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.gbgr-mode-toggle:focus-visible {
+	outline: 2px solid var(--border-active);
+	outline-offset: 2px;
+}
+
+.gbgr-mode-toggle__thumb {
+	position: absolute;
+	top: var(--gbgr-mode-toggle-padding);
+	left: var(--gbgr-mode-toggle-padding);
+	width: var(--gbgr-mode-toggle-thumb);
+	height: var(--gbgr-mode-toggle-thumb);
+	border-radius: var(--radius-full);
+	background: var(--color-component-button-mode-change-thumb-on);
+	transition:
+		transform 160ms ease,
+		background-color 160ms ease;
+}
+
+.gbgr-mode-toggle[data-value="dark"] .gbgr-mode-toggle__thumb {
+	transform: translateX(
+		calc(
+			var(--gbgr-mode-toggle-width) -
+			(var(--gbgr-mode-toggle-padding) * 2) -
+			var(--gbgr-mode-toggle-thumb)
+		)
+	);
+}
+
+.gbgr-mode-toggle__icon {
+	position: absolute;
+	top: 50%;
+	width: var(--gbgr-mode-toggle-icon);
+	height: var(--gbgr-mode-toggle-icon);
+	transform: translateY(-50%);
+	color: var(--color-component-button-mode-change-switch-off);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1;
+	transition:
+		color 160ms ease,
+		opacity 160ms ease;
+}
+
+.gbgr-mode-toggle__icon svg {
+	width: var(--gbgr-mode-toggle-icon);
+	height: var(--gbgr-mode-toggle-icon);
+	display: block;
+}
+
+.gbgr-mode-toggle__icon--light {
+	left: calc(var(--gbgr-mode-toggle-padding) + 4px);
+}
+
+.gbgr-mode-toggle__icon--dark {
+	right: calc(var(--gbgr-mode-toggle-padding) + 4px);
+}
+
+.gbgr-mode-toggle[data-value="light"] .gbgr-mode-toggle__icon--light {
+	color: var(--color-component-button-mode-change-switch-on);
+}
+
+.gbgr-mode-toggle[data-value="dark"] .gbgr-mode-toggle__icon--dark {
+	color: var(--color-component-button-mode-change-switch-on);
+}

package/src/styles.css

@@ -0,0 +1,4 @@
+@import "./button/button.css";
+@import "./accordion/accordion.css";
+@import "./mode-toggle/mode-toggle.css";
+@import "./text-field/text-field.css";

package/src/text-field/TextField.tsx

@@ -0,0 +1,121 @@
+import { HideIcon, InfoCircleIcon, ShowIcon } from "@gbgr/icons"
+import { useTextField } from "@gbgr/react-headless"
+import clsx from "clsx"
+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
+}
+
+function SuccessIcon(props: React.SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
+			<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8" />
+			<path
+				d="M8.5 12.3 11 14.7 15.7 9.8"
+				stroke="currentColor"
+				strokeWidth="1.8"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	)
+}
+
+export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+	(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 (
+				<button
+					type="button"
+					className="gbgr-text-field__button"
+					onClick={togglePasswordVisible}
+					aria-label={isPasswordVisible ? "Hide password" : "Show password"}
+					disabled={disabled}
+				>
+					{isPasswordVisible ? <HideIcon /> : <ShowIcon />}
+				</button>
+			)
+		}, [
+			endAdornment,
+			isPassword,
+			isPasswordVisible,
+			togglePasswordVisible,
+			disabled,
+		])
+
+		const resolvedSubIcon =
+			subIcon ??
+			(state === "success" ? (
+				<SuccessIcon />
+			) : state === "error" ? (
+				<InfoCircleIcon />
+			) : null)
+
+		return (
+			<div className={clsx("gbgr-text-field", className)} data-state={state}>
+				<div className="gbgr-text-field__control">
+					<input
+						{...rest}
+						ref={ref}
+						type={inputType}
+						disabled={disabled}
+						className="gbgr-text-field__input"
+					/>
+					{resolvedEndAdornment ? (
+						<span className="gbgr-text-field__end">{resolvedEndAdornment}</span>
+					) : null}
+				</div>
+				{subText ? (
+					<div className="gbgr-text-field__sub">
+						{resolvedSubIcon ? (
+							<span className="gbgr-text-field__sub-icon" aria-hidden="true">
+								{resolvedSubIcon}
+							</span>
+						) : null}
+						<span>{subText}</span>
+					</div>
+				) : null}
+			</div>
+		)
+	},
+)
+
+TextField.displayName = "TextField"