feat(toggle-button): introduce a toggle button

packages/utah-design-system/src/components/ToggleButton.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta } from '@storybook/react';
+import { PenLineIcon } from 'lucide-react';
+import { ToggleButton as Component } from './ToggleButton';
+const meta: Meta<typeof Component> = {
+  component: Component,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+
+export const Example = (args: any) => <Component {...args}>Pin</Component>;
+export const Icon = (args: any) => (
+  <Component {...args}>
+    <PenLineIcon />
+  </Component>
+);

packages/utah-design-system/src/components/ToggleButton.tsx

@@ -0,0 +1,33 @@
+import {
+  ToggleButton as RACToggleButton,
+  type ToggleButtonProps,
+  composeRenderProps,
+} from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { focusRing } from './utils';
+
+let styles = tv({
+  extend: focusRing,
+  base: 'min-h-9 cursor-default rounded-full border border-black/10 px-8 text-center text-base shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition dark:border-white/10 dark:shadow-none [&:has(svg:only-child)]:min-h-0 [&:has(svg:only-child)]:p-0.5',
+  variants: {
+    isSelected: {
+      false:
+        'bg-gray-100 text-gray-800 hover:bg-gray-200 pressed:bg-gray-300 dark:bg-zinc-600 dark:text-zinc-100 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 forced-colors:!bg-[ButtonFace] forced-colors:!text-[ButtonText]',
+      true: 'bg-gray-700 text-white hover:bg-gray-800 pressed:bg-gray-900 dark:bg-accent-300 dark:text-black dark:hover:bg-accent-200 dark:pressed:bg-accent-100 forced-colors:!bg-[Highlight] forced-colors:!text-[HighlightText]',
+    },
+    isDisabled: {
+      true: 'border-black/5 bg-gray-100 text-gray-300 dark:border-white/5 dark:bg-zinc-800 dark:text-zinc-600 forced-colors:border-[GrayText] forced-colors:!bg-[ButtonFace] forced-colors:!text-[GrayText]',
+    },
+  },
+});
+
+export function ToggleButton(props: ToggleButtonProps) {
+  return (
+    <RACToggleButton
+      {...props}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        styles({ ...renderProps, className }),
+      )}
+    />
+  );
+}

packages/utah-design-system/src/index.ts

@@ -25,6 +25,7 @@ export * from './components/Switch';
 export * from './components/Tabs';
 export * from './components/TagGroup';
 export * from './components/TextField';
+export * from './components/ToggleButton';
 export * from './components/UtahIdLogin';
 export * from './contexts/FirebaseAnalyticsProvider';
 export * from './contexts/FirebaseAppProvider';