@maratus-registry/separator 0.1.0 → 0.2.0

package/css-files/Separator.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+import './separator.css'
+
+export type SeparatorProps = HTMLAttributes<HTMLHRElement> & {
+  isDecorative?: boolean
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export function Separator(props: SeparatorProps) {
+  const { className, isDecorative, orientation = 'horizontal', ...rest } = props
+  const isVertical = orientation === 'vertical'
+
+  const Tag = isVertical ? 'div' : 'hr'
+  const ariaHidden = isDecorative ? true : rest['aria-hidden']
+  const semanticProps = isVertical
+    ? {
+        'aria-orientation': 'vertical' as const,
+        role: 'separator' as const,
+      }
+    : {}
+
+  return (
+    <Tag
+      {...rest}
+      aria-hidden={ariaHidden}
+      {...semanticProps}
+      className={clsx('maratus__separator__separator', className)}
+    />
+  )
+}

package/css-files/index.ts

@@ -0,0 +1,2 @@
+export type { SeparatorProps } from './Separator'
+export { Separator } from './Separator'

package/css-files/separator.css

@@ -0,0 +1,15 @@
+@layer components {
+  :root {
+    --ara-separator-detail: var(--ara-color-content-detail);
+    --ara-separator-shadow: var(--ara-shadow-content);
+    --ara-separator-thickness: var(--ara-border-width-x1);
+    --ara-separator-margin-block: var(--ara-spacing-x1);
+  }
+
+  .maratus__separator__separator {
+    border-top-color: var(--ara-separator-detail);
+    border-top-width: var(--ara-separator-thickness);
+    box-shadow: var(--ara-separator-shadow);
+    margin-block: var(--ara-separator-margin-block);
+  }
+}

package/css-modules/Separator.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+import styles from './separator.module.css'
+
+export type SeparatorProps = HTMLAttributes<HTMLHRElement> & {
+  isDecorative?: boolean
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export function Separator(props: SeparatorProps) {
+  const { className, isDecorative, orientation = 'horizontal', ...rest } = props
+  const isVertical = orientation === 'vertical'
+
+  const Tag = isVertical ? 'div' : 'hr'
+  const ariaHidden = isDecorative ? true : rest['aria-hidden']
+  const semanticProps = isVertical
+    ? {
+        'aria-orientation': 'vertical' as const,
+        role: 'separator' as const,
+      }
+    : {}
+
+  return (
+    <Tag
+      {...rest}
+      aria-hidden={ariaHidden}
+      {...semanticProps}
+      className={clsx(styles.separator, className)}
+    />
+  )
+}

package/css-modules/index.ts

@@ -0,0 +1,2 @@
+export type { SeparatorProps } from './Separator'
+export { Separator } from './Separator'

package/css-modules/separator.module.css

@@ -0,0 +1,13 @@
+:root {
+  --ara-separator-detail: var(--ara-color-content-detail);
+  --ara-separator-shadow: var(--ara-shadow-content);
+  --ara-separator-thickness: var(--ara-border-width-x1);
+  --ara-separator-margin-block: var(--ara-spacing-x1);
+}
+
+.separator {
+  border-top-color: var(--ara-separator-detail);
+  border-top-width: var(--ara-separator-thickness);
+  box-shadow: var(--ara-separator-shadow);
+  margin-block: var(--ara-separator-margin-block);
+}

package/meta.json

@@ -0,0 +1,26 @@
+{
+  "themeTokens": [
+    "--ara-color-content-detail",
+    "--ara-shadow-content",
+    "--ara-border-width-x1",
+    "--ara-spacing-x1"
+  ],
+  "componentTokens": [
+    {
+      "component": "--ara-separator-detail",
+      "theme": "--ara-color-content-detail"
+    },
+    {
+      "component": "--ara-separator-shadow",
+      "theme": "--ara-shadow-content"
+    },
+    {
+      "component": "--ara-separator-thickness",
+      "theme": "--ara-border-width-x1"
+    },
+    {
+      "component": "--ara-separator-margin-block",
+      "theme": "--ara-spacing-x1"
+    }
+  ]
+}

package/package.json

@@ -1,7 +1,13 @@
 {
   "name": "@maratus-registry/separator",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
+  "files": [
+    "css-files",
+    "css-modules",
+    "tailwind-css",
+    "meta.json"
+  ],
   "type": "module",
   "peerDependencies": {
     "clsx": "^2.1.1",

package/tailwind-css/Separator.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+import './separator.css'
+
+export type SeparatorProps = HTMLAttributes<HTMLHRElement> & {
+  isDecorative?: boolean
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export function Separator(props: SeparatorProps) {
+  const { className, isDecorative, orientation = 'horizontal', ...rest } = props
+  const isVertical = orientation === 'vertical'
+
+  const Tag = isVertical ? 'div' : 'hr'
+  const ariaHidden = isDecorative ? true : rest['aria-hidden']
+  const semanticProps = isVertical
+    ? {
+        'aria-orientation': 'vertical' as const,
+        role: 'separator' as const,
+      }
+    : {}
+
+  return (
+    <Tag
+      {...rest}
+      aria-hidden={ariaHidden}
+      {...semanticProps}
+      className={clsx('maratus__separator__separator', className)}
+    />
+  )
+}

package/tailwind-css/index.ts

@@ -0,0 +1,2 @@
+export type { SeparatorProps } from './Separator'
+export { Separator } from './Separator'

package/tailwind-css/separator.css

@@ -0,0 +1,17 @@
+@reference "tailwindcss";
+
+:root {
+  --ara-separator-detail: var(--ara-color-content-detail);
+  --ara-separator-shadow: var(--ara-shadow-content);
+  --ara-separator-thickness: var(--ara-border-width-x1);
+  --ara-separator-margin-block: var(--ara-spacing-x1);
+}
+
+@layer components {
+  .maratus__separator__separator {
+    border-top-color: var(--ara-separator-detail);
+    border-top-width: var(--ara-separator-thickness);
+    box-shadow: var(--ara-separator-shadow);
+    margin-block: var(--ara-separator-margin-block);
+  }
+}

package/CHANGELOG.md

@@ -1,7 +0,0 @@
-# @maratus-registry/separator
-
-## 0.1.0
-
-### Minor Changes
-
-- 479324d: Publish the initial public Maratus packages, including the CLI, platform binaries, codemod runner, codemods, runtime libraries, and the first registry components: separator, button, focus-modality.