retail-design-system 1.0.0

package/packages/ui/src/components/switch/switch.module.css

@@ -0,0 +1,62 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.switch {
+  display: flex;
+  padding: 2px;
+  overflow: hidden;
+  cursor: pointer;
+  outline-width: 2px;
+  outline-style: none;
+  outline-color: var(--color-bg-accent);
+  outline-offset: 2px;
+  background-color: var(--color-bg-tertiary);
+  border-radius: 9999px;
+  transition-duration: 150ms;
+  transition-property: background-color;
+}
+
+.switch:focus-visible {
+  outline-style: solid;
+}
+
+.switch[data-checked] {
+  background-color: var(--color-bg-accent);
+}
+
+.switch[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ===================================================== */
+/* Thumb */
+/* ===================================================== */
+
+.switch__thumb {
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  background-color: white;
+  border-radius: 9999px;
+  transition-duration: 150ms;
+  transition-property: transform;
+}
+
+.switch__thumb[data-checked] {
+  transform: translateX(var(--translateX));
+}
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.switch__size_14 {
+  --translateX: 12px;
+  width: 30px;
+  height: 18px;
+}
+
+.switch__size_24 {
+  --translateX: 16px;
+  width: 40px;
+  height: 24px;
+}

package/packages/ui/src/components/switch/switch.tsx

@@ -0,0 +1,58 @@
+import { Switch as BaseSwitch } from "@base-ui/react"
+import type { ComponentProps, JSX } from "react"
+import styles from "@/components/switch/switch.module.css"
+
+export interface SwitchProps extends Omit<
+  ComponentProps<typeof BaseSwitch.Root>,
+  "checked" | "defaultChecked" | "disabled" | "nativeButton" | "readOnly" | "required"
+> {
+  isChecked?: boolean
+  isDefaultChecked?: boolean
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  size?: 14 | 24
+}
+
+export function Switch(props: SwitchProps): JSX.Element {
+  const {
+    className: customClassName = "",
+    isChecked = undefined,
+    isDefaultChecked = false,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    size = 24,
+    ...rest
+  } = props
+
+  const combinedClassName = `
+    ${SWITCH_CLASS_NAME.BASE}
+    ${SWITCH_CLASS_NAME.SIZE[size]}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return (
+    <BaseSwitch.Root
+      checked={isChecked}
+      className={combinedClassName}
+      defaultChecked={isDefaultChecked}
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+      required={isRequired}
+      {...rest}
+    >
+      <BaseSwitch.Thumb className={styles.switch__thumb} />
+    </BaseSwitch.Root>
+  )
+}
+
+export const SWITCH_CLASS_NAME = {
+  BASE: styles.switch,
+  SIZE: {
+    14: styles.switch__size_14,
+    24: styles.switch__size_24,
+  },
+} as const

package/packages/ui/src/components/tabs/tabs-panel.module.css

@@ -0,0 +1,4 @@
+.tabs_panel {
+  display: flex;
+  flex-direction: column;
+}

package/packages/ui/src/components/tabs/tabs-panel.tsx

@@ -0,0 +1,21 @@
+import { Tabs as BaseTabs } from "@base-ui/react"
+import styles from "@/components/tabs/tabs-panel.module.css"
+
+export interface TabsPanelProps extends BaseTabs.Panel.Props {}
+
+export function TabsPanel(props: TabsPanelProps) {
+  const { className: customClassName = "", ...rest } = props
+
+  const combinedClassName = `
+    ${TABS_PANEL_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return <BaseTabs.Panel className={combinedClassName} data-slot="tabs-panel" {...rest} />
+}
+
+export const TABS_PANEL_CLASS_NAME = {
+  BASE: styles.tabs_panel,
+} as const

package/packages/ui/src/components/tabs/tabs.module.css

@@ -0,0 +1,5 @@
+.tabs_underline {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}

package/packages/ui/src/components/tabs/tabs.tsx

@@ -0,0 +1,21 @@
+import { Tabs as BaseTabs } from "@base-ui/react"
+import styles from "@/components/tabs/tabs.module.css"
+
+export interface TabsProps extends BaseTabs.Root.Props {}
+
+export function Tabs(props: TabsProps) {
+  const { className: customClassName = "", ...rest } = props
+
+  const combinedClassName = `
+    ${TABS_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return <BaseTabs.Root className={combinedClassName} data-slot="tabs" {...rest} />
+}
+
+export const TABS_CLASS_NAME = {
+  BASE: styles.tabs,
+} as const

package/packages/ui/src/components/tabs-underline/tabs-underline-indicator.module.css

@@ -0,0 +1,10 @@
+.tabs_underline_indicator {
+  background-color: var(--color-bg-accent);
+  bottom: 0px;
+  height: 2px;
+  left: var(--active-tab-left);
+  position: absolute;
+  transition-duration: 150ms;
+  transition-property: left, width;
+  width: var(--active-tab-width);
+}

package/packages/ui/src/components/tabs-underline/tabs-underline-indicator.tsx

@@ -0,0 +1,33 @@
+import { Tabs as BaseTabs } from "@base-ui/react"
+import styles from "@/components/tabs-underline/tabs-underline-indicator.module.css"
+
+export interface TabsUnderlineIndicatorProps extends Omit<
+  BaseTabs.Indicator.Props,
+  "renderBeforeHydration"
+> {
+  isRenderBeforeHydration?: boolean
+}
+
+export function TabsUnderlineIndicator(props: TabsUnderlineIndicatorProps) {
+  const { className: customClassName = "", isRenderBeforeHydration = true, ...rest } = props
+
+  const combinedClassName = `
+    ${TABS_UNDERLINE_INDICATOR_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return (
+    <BaseTabs.Indicator
+      className={combinedClassName}
+      data-slot="tabs-indicator"
+      renderBeforeHydration={isRenderBeforeHydration}
+      {...rest}
+    />
+  )
+}
+
+export const TABS_UNDERLINE_INDICATOR_CLASS_NAME = {
+  BASE: styles.tabs_underline_indicator,
+} as const

package/packages/ui/src/components/tabs-underline/tabs-underline-list.module.css

@@ -0,0 +1,8 @@
+.tabs_underline_list {
+  border-bottom-color: var(--color-border-secondary);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  display: flex;
+  overflow-x: auto;
+  position: relative;
+}

package/packages/ui/src/components/tabs-underline/tabs-underline-list.tsx

@@ -0,0 +1,27 @@
+import { Tabs as BaseTabs } from "@base-ui/react"
+import { TabsUnderlineIndicator } from "@/components/tabs-underline/tabs-underline-indicator"
+import styles from "@/components/tabs-underline/tabs-underline-list.module.css"
+
+export interface TabsUnderlineListProps extends BaseTabs.List.Props {}
+
+export function TabsUnderlineList(props: TabsUnderlineListProps) {
+  const { className: customClassName = "", children = "", ...rest } = props
+
+  const combinedClassName = `
+    ${TABS_UNDERLINE_LIST_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return (
+    <BaseTabs.List className={combinedClassName} data-slot="tabs-list" {...rest}>
+      {children}
+      <TabsUnderlineIndicator />
+    </BaseTabs.List>
+  )
+}
+
+export const TABS_UNDERLINE_LIST_CLASS_NAME = {
+  BASE: styles.tabs_underline_list,
+} as const

package/packages/ui/src/components/tabs-underline/tabs-underline-tab.module.css

@@ -0,0 +1,24 @@
+.tabs_underline_tab {
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 6px;
+  outline-color: var(--color-bg-accent);
+  outline-offset: -2px;
+  outline-style: none;
+  outline-width: 2px;
+  padding: 6px 12px;
+  transition-duration: 150ms;
+  transition-property: color;
+}
+
+.tabs_underline_tab:focus-visible {
+  outline-style: solid;
+}
+
+.tabs_underline_tab:hover,
+.tabs_underline_tab[data-active] {
+  color: var(--color-text-primary);
+}

package/packages/ui/src/components/tabs-underline/tabs-underline-tab.tsx

@@ -0,0 +1,30 @@
+import { Tabs as BaseTabs } from "@base-ui/react"
+import styles from "@/components/tabs-underline/tabs-underline-tab.module.css"
+
+export interface TabsUnderlineTabProps extends Omit<BaseTabs.Tab.Props, "nativeButton"> {
+  isNativeButton?: boolean
+}
+
+export function TabsUnderlineTab(props: TabsUnderlineTabProps) {
+  const { className: customClassName = "", isNativeButton = true, ...rest } = props
+
+  const combinedClassName = `
+    ${TABS_UNDERLINE_TAB_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return (
+    <BaseTabs.Tab
+      className={combinedClassName}
+      data-slot="tabs-tab"
+      nativeButton={isNativeButton}
+      {...rest}
+    />
+  )
+}
+
+export const TABS_UNDERLINE_TAB_CLASS_NAME = {
+  BASE: styles.tabs_underline_tab,
+} as const