tamagui 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/cjs/components/Select.cjs +23 -5
  2. package/dist/cjs/components/Select.native.cjs +25 -5
  3. package/dist/cjs/components/Select.native.js +25 -5
  4. package/dist/cjs/components/Select.native.js.map +1 -1
  5. package/dist/esm/components/Select.mjs +23 -5
  6. package/dist/esm/components/Select.mjs.map +1 -1
  7. package/dist/esm/components/Select.native.js +25 -5
  8. package/dist/esm/components/Select.native.js.map +1 -1
  9. package/dist/jsx/components/Select.mjs +23 -5
  10. package/dist/jsx/components/Select.mjs.map +1 -1
  11. package/dist/jsx/components/Select.native.cjs +25 -5
  12. package/dist/jsx/components/Select.native.js +25 -5
  13. package/dist/jsx/components/Select.native.js.map +1 -1
  14. package/dist/native.cjs +28 -15
  15. package/dist/test.cjs +28 -15
  16. package/package.json +67 -67
  17. package/src/components/Select.tsx +24 -0
  18. package/types/components/Accordion.d.ts +1 -1
  19. package/types/components/Select.d.ts.map +1 -1
  20. package/types/components/Sheet.d.ts +5 -5
  21. package/types/components/Sheet.d.ts.map +1 -1
package/dist/jsx/components/Select.mjs CHANGED
@@ -105,46 +105,61 @@ const selectItemSize = {
105
105
  paddingVertical: "2.5"
106
106
  }
107
107
  };
108
+ const nativeChevronStroke = (angle) => `linear-gradient(${angle}deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px))`;
109
+ const nativeChevronPosition = (paddingInline) => {
110
+ const center = paddingInline + 8;
111
+ return `calc(100% - ${center - .25}px) 50%, calc(100% - ${center - 4.75}px) 50%`;
112
+ };
108
113
  const selectNativeSize = {
109
114
  xs: {
115
+ ...selectTextSize.xs,
110
116
  paddingInline: "2",
111
117
  paddingBlock: "1",
112
118
  borderRadius: "sm",
113
119
  gap: "1",
114
120
  height: 26,
115
- paddingRight: 28
121
+ paddingRight: 28,
122
+ backgroundPosition: nativeChevronPosition(8)
116
123
  },
117
124
  sm: {
125
+ ...selectTextSize.sm,
118
126
  paddingInline: "3",
119
127
  paddingBlock: "1.5",
120
128
  borderRadius: "md",
121
129
  gap: "1.5",
122
130
  height: 34,
123
- paddingRight: 32
131
+ paddingRight: 32,
132
+ backgroundPosition: nativeChevronPosition(12)
124
133
  },
125
134
  md: {
135
+ ...selectTextSize.md,
126
136
  paddingInline: "4",
127
137
  paddingBlock: "2",
128
138
  borderRadius: "md",
129
139
  gap: "2",
130
140
  height: 38,
131
- paddingRight: 36
141
+ paddingRight: 36,
142
+ backgroundPosition: nativeChevronPosition(16)
132
143
  },
133
144
  lg: {
145
+ ...selectTextSize.lg,
134
146
  paddingInline: "6",
135
147
  paddingBlock: "2",
136
148
  borderRadius: "md",
137
149
  gap: "2",
138
150
  height: 42,
139
- paddingRight: 44
151
+ paddingRight: 44,
152
+ backgroundPosition: nativeChevronPosition(24)
140
153
  },
141
154
  xl: {
155
+ ...selectTextSize.xl,
142
156
  paddingInline: "8",
143
157
  paddingBlock: "2.5",
144
158
  borderRadius: "lg",
145
159
  gap: "2.5",
146
160
  height: 50,
147
- paddingRight: 52
161
+ paddingRight: 52,
162
+ backgroundPosition: nativeChevronPosition(32)
148
163
  }
149
164
  };
150
165
  const SelectNative = styled(SizableText, {
@@ -156,6 +171,9 @@ const SelectNative = styled(SizableText, {
156
171
  color: "color",
157
172
  outlineWidth: 0,
158
173
  userSelect: "none",
174
+ backgroundImage: `${nativeChevronStroke(45)}, ${nativeChevronStroke(-45)}`,
175
+ backgroundRepeat: "no-repeat",
176
+ backgroundSize: "5px 5px",
159
177
  variants: { size: {
160
178
  ...selectNativeSize,
161
179
  true: selectNativeSize.md
package/dist/jsx/components/Select.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":["SelectBehavior"],"sources":["jsx/components/Select.js"],"sourcesContent":["import {\n createStyledContext,\n styled,\n withStaticProperties\n} from \"@tamagui/core\";\nimport {\n Select as SelectBehavior,\n SelectNativeComponentContext\n} from \"@tamagui/select\";\nimport { SizableText } from \"@tamagui/text\";\nimport { jsx } from \"react/jsx-runtime\";\nconst IconGlyph = styled(SizableText, {\n displayName: \"SelectIconGlyph\",\n color: \"color\",\n userSelect: \"none\"\n});\nconst ChevronDown = ({ size = 16 }) => /* @__PURE__ */ jsx(IconGlyph, { fontSize: size, lineHeight: 1, children: \"\\u25BE\" });\nconst ChevronUp = ({ size = 16 }) => /* @__PURE__ */ jsx(IconGlyph, { fontSize: size, lineHeight: 1, children: \"\\u25B4\" });\nconst Check = ({ size = 14 }) => /* @__PURE__ */ jsx(IconGlyph, { fontSize: size, lineHeight: 1, children: \"\\u2713\" });\nconst SelectContext = createStyledContext({ size: \"md\" });\nconst selectFrameSize = {\n xs: { paddingInline: \"2\", paddingBlock: \"1\", borderRadius: \"sm\", gap: \"1\" },\n sm: { paddingInline: \"3\", paddingBlock: \"1.5\", borderRadius: \"md\", gap: \"1.5\" },\n md: { paddingInline: \"4\", paddingBlock: \"2\", borderRadius: \"md\", gap: \"2\" },\n lg: { paddingInline: \"6\", paddingBlock: \"2\", borderRadius: \"md\", gap: \"2\" },\n xl: { paddingInline: \"8\", paddingBlock: \"2.5\", borderRadius: \"lg\", gap: \"2.5\" }\n};\nconst selectTextSize = {\n xs: { fontSize: \"xs\", lineHeight: \"xs\" },\n sm: { fontSize: \"sm\", lineHeight: \"sm\" },\n md: { fontSize: \"sm\", lineHeight: \"sm\" },\n lg: { fontSize: \"base\", lineHeight: \"base\" },\n xl: { fontSize: \"lg\", lineHeight: \"lg\" }\n};\nconst selectItemSize = {\n xs: { gap: \"1\", paddingHorizontal: \"2\", paddingVertical: \"1\" },\n sm: { gap: \"1.5\", paddingHorizontal: \"3\", paddingVertical: \"1.5\" },\n md: { gap: \"2\", paddingHorizontal: \"4\", paddingVertical: \"2\" },\n lg: { gap: \"2\", paddingHorizontal: \"6\", paddingVertical: \"2\" },\n xl: { gap: \"2.5\", paddingHorizontal: \"8\", paddingVertical: \"2.5\" }\n};\nconst selectNativeSize = {\n // a native <select> ignores line-height, so it gets the control height\n // (line height plus vertical padding) plus its 1px border on each side,\n // and room for the chevron\n xs: {\n paddingInline: \"2\",\n paddingBlock: \"1\",\n borderRadius: \"sm\",\n gap: \"1\",\n height: 26,\n paddingRight: 28\n },\n sm: {\n paddingInline: \"3\",\n paddingBlock: \"1.5\",\n borderRadius: \"md\",\n gap: \"1.5\",\n height: 34,\n paddingRight: 32\n },\n md: {\n paddingInline: \"4\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\",\n height: 38,\n paddingRight: 36\n },\n lg: {\n paddingInline: \"6\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\",\n height: 42,\n paddingRight: 44\n },\n xl: {\n paddingInline: \"8\",\n paddingBlock: \"2.5\",\n borderRadius: \"lg\",\n gap: \"2.5\",\n height: 50,\n paddingRight: 52\n }\n};\nconst SelectNative = styled(SizableText, {\n displayName: \"SelectNative\",\n render: \"select\",\n backgroundColor: \"background hover:background-hover\",\n borderColor: \"border-color\",\n borderWidth: 1,\n color: \"color\",\n outlineWidth: 0,\n userSelect: \"none\",\n variants: {\n size: {\n ...selectNativeSize,\n true: selectNativeSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectTrigger = styled(SelectBehavior.Trigger, {\n context: SelectContext,\n displayName: \"SelectTrigger\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexWrap: \"nowrap\",\n backgroundColor: \"background hover:background-hover press:background-press\",\n borderColor: \"border-color hover:border-color-hover\",\n borderWidth: 1,\n justifyContent: \"space-between\",\n outlineColor: \"focus-visible:outline-color\",\n outlineStyle: \"focus-visible:solid\",\n outlineWidth: \"focus-visible:2px\",\n variants: {\n size: {\n ...selectFrameSize,\n true: selectFrameSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectValue = styled(SelectBehavior.Value, {\n context: SelectContext,\n displayName: \"SelectValue\",\n color: \"color\",\n ellipsis: true,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectIcon = styled(SelectBehavior.Icon, {\n context: SelectContext,\n displayName: \"SelectIcon\",\n marginLeft: \"auto\",\n children: /* @__PURE__ */ jsx(ChevronDown, {})\n});\nconst SelectGroup = styled(SelectBehavior.Group, {\n displayName: \"SelectGroup\",\n width: \"100%\"\n});\nconst SelectLabel = styled(SelectBehavior.Label, {\n context: SelectContext,\n displayName: \"SelectLabel\",\n color: \"color-10\",\n fontWeight: \"600\",\n paddingHorizontal: 10,\n paddingVertical: 6,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectItem = styled(SelectBehavior.Item, {\n context: SelectContext,\n displayName: \"SelectItem\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexWrap: \"nowrap\",\n justifyContent: \"space-between\",\n cursor: \"default\",\n outlineOffset: -1,\n borderRadius: 6,\n backgroundColor: \"hover:background-hover press:background-press focus:background-focus\",\n outlineColor: \"focus-visible:outline-color\",\n outlineStyle: \"focus-visible:solid\",\n outlineWidth: \"focus-visible:1px\",\n variants: {\n size: {\n ...selectItemSize,\n true: selectItemSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectItemText = styled(SelectBehavior.ItemText, {\n context: SelectContext,\n displayName: \"SelectItemText\",\n color: \"color\",\n userSelect: \"none\",\n ellipsis: true,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectItemIndicator = styled(SelectBehavior.ItemIndicator, {\n displayName: \"SelectItemIndicator\",\n alignItems: \"center\",\n justifyContent: \"center\",\n marginLeft: \"auto\",\n children: /* @__PURE__ */ jsx(Check, { size: 14 })\n});\nconst SelectIndicator = styled(SelectBehavior.Indicator, {\n displayName: \"SelectIndicator\",\n backgroundColor: \"background-focus\",\n borderRadius: 6\n});\nconst SelectViewport = styled(SelectBehavior.Viewport, {\n displayName: \"SelectViewport\",\n backgroundColor: \"background\",\n borderColor: \"border-color\",\n borderRadius: 10,\n borderWidth: 1,\n maxHeight: 300,\n padding: 4,\n boxShadow: \"0 12px 28px rgba(0, 0, 0, 0.2)\"\n});\nconst SelectScrollUpButton = styled(SelectBehavior.ScrollUpButton, {\n displayName: \"SelectScrollUpButton\",\n alignItems: \"center\",\n backgroundColor: \"background\",\n height: 28,\n justifyContent: \"center\",\n children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 })\n});\nconst SelectScrollDownButton = styled(SelectBehavior.ScrollDownButton, {\n displayName: \"SelectScrollDownButton\",\n alignItems: \"center\",\n backgroundColor: \"background\",\n height: 28,\n justifyContent: \"center\",\n children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })\n});\nconst SelectSeparator = styled(SelectBehavior.Separator, {\n displayName: \"SelectSeparator\",\n backgroundColor: \"border-color\",\n height: 1,\n marginVertical: 4\n});\nfunction SelectRoot({ size = true, ...props }) {\n return /* @__PURE__ */ jsx(SelectNativeComponentContext.Provider, { value: SelectNative, children: /* @__PURE__ */ jsx(SelectContext.Provider, { size, children: /* @__PURE__ */ jsx(SelectBehavior.Root, { size, ...props }) }) });\n}\nconst selectParts = {\n Adapt: SelectBehavior.Adapt,\n Content: SelectBehavior.Content,\n FocusScope: SelectBehavior.FocusScope,\n Group: SelectGroup,\n Icon: SelectIcon,\n Indicator: SelectIndicator,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Separator: SelectSeparator,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport\n};\nconst Select = withStaticProperties(SelectRoot, {\n Root: SelectRoot,\n ...selectParts\n});\nexport {\n Select,\n SelectGroup,\n SelectIcon,\n SelectIndicator,\n SelectItem,\n SelectItemIndicator,\n SelectItemText,\n SelectLabel,\n SelectRoot,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n SelectViewport,\n selectParts\n};\n//# sourceMappingURL=Select.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"Select.js","names":["SelectBehavior"],"sources":["jsx/components/Select.js"],"sourcesContent":["import {\n createStyledContext,\n styled,\n withStaticProperties\n} from \"@tamagui/core\";\nimport {\n Select as SelectBehavior,\n SelectNativeComponentContext\n} from \"@tamagui/select\";\nimport { SizableText } from \"@tamagui/text\";\nimport { jsx } from \"react/jsx-runtime\";\nconst IconGlyph = styled(SizableText, {\n displayName: \"SelectIconGlyph\",\n color: \"color\",\n userSelect: \"none\"\n});\nconst ChevronDown = ({ size = 16 }) => /* @__PURE__ */ jsx(IconGlyph, { fontSize: size, lineHeight: 1, children: \"\\u25BE\" });\nconst ChevronUp = ({ size = 16 }) => /* @__PURE__ */ jsx(IconGlyph, { fontSize: size, lineHeight: 1, children: \"\\u25B4\" });\nconst Check = ({ size = 14 }) => /* @__PURE__ */ jsx(IconGlyph, { fontSize: size, lineHeight: 1, children: \"\\u2713\" });\nconst SelectContext = createStyledContext({ size: \"md\" });\nconst selectFrameSize = {\n xs: { paddingInline: \"2\", paddingBlock: \"1\", borderRadius: \"sm\", gap: \"1\" },\n sm: { paddingInline: \"3\", paddingBlock: \"1.5\", borderRadius: \"md\", gap: \"1.5\" },\n md: { paddingInline: \"4\", paddingBlock: \"2\", borderRadius: \"md\", gap: \"2\" },\n lg: { paddingInline: \"6\", paddingBlock: \"2\", borderRadius: \"md\", gap: \"2\" },\n xl: { paddingInline: \"8\", paddingBlock: \"2.5\", borderRadius: \"lg\", gap: \"2.5\" }\n};\nconst selectTextSize = {\n xs: { fontSize: \"xs\", lineHeight: \"xs\" },\n sm: { fontSize: \"sm\", lineHeight: \"sm\" },\n md: { fontSize: \"sm\", lineHeight: \"sm\" },\n lg: { fontSize: \"base\", lineHeight: \"base\" },\n xl: { fontSize: \"lg\", lineHeight: \"lg\" }\n};\nconst selectItemSize = {\n xs: { gap: \"1\", paddingHorizontal: \"2\", paddingVertical: \"1\" },\n sm: { gap: \"1.5\", paddingHorizontal: \"3\", paddingVertical: \"1.5\" },\n md: { gap: \"2\", paddingHorizontal: \"4\", paddingVertical: \"2\" },\n lg: { gap: \"2\", paddingHorizontal: \"6\", paddingVertical: \"2\" },\n xl: { gap: \"2.5\", paddingHorizontal: \"8\", paddingVertical: \"2.5\" }\n};\nconst nativeChevronStroke = (angle) => `linear-gradient(${angle}deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px))`;\nconst nativeChevronPosition = (paddingInline) => {\n const center = paddingInline + 8;\n return `calc(100% - ${center - 0.25}px) 50%, calc(100% - ${center - 4.75}px) 50%`;\n};\nconst selectNativeSize = {\n // a native <select> ignores line-height, so it gets the control height\n // (line height plus vertical padding) plus its 1px border on each side,\n // and room for the chevron\n xs: {\n ...selectTextSize.xs,\n paddingInline: \"2\",\n paddingBlock: \"1\",\n borderRadius: \"sm\",\n gap: \"1\",\n height: 26,\n paddingRight: 28,\n backgroundPosition: nativeChevronPosition(8)\n },\n sm: {\n ...selectTextSize.sm,\n paddingInline: \"3\",\n paddingBlock: \"1.5\",\n borderRadius: \"md\",\n gap: \"1.5\",\n height: 34,\n paddingRight: 32,\n backgroundPosition: nativeChevronPosition(12)\n },\n md: {\n ...selectTextSize.md,\n paddingInline: \"4\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\",\n height: 38,\n paddingRight: 36,\n backgroundPosition: nativeChevronPosition(16)\n },\n lg: {\n ...selectTextSize.lg,\n paddingInline: \"6\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\",\n height: 42,\n paddingRight: 44,\n backgroundPosition: nativeChevronPosition(24)\n },\n xl: {\n ...selectTextSize.xl,\n paddingInline: \"8\",\n paddingBlock: \"2.5\",\n borderRadius: \"lg\",\n gap: \"2.5\",\n height: 50,\n paddingRight: 52,\n backgroundPosition: nativeChevronPosition(32)\n }\n};\nconst SelectNative = styled(SizableText, {\n displayName: \"SelectNative\",\n render: \"select\",\n backgroundColor: \"background hover:background-hover\",\n borderColor: \"border-color\",\n borderWidth: 1,\n color: \"color\",\n outlineWidth: 0,\n userSelect: \"none\",\n backgroundImage: `${nativeChevronStroke(45)}, ${nativeChevronStroke(-45)}`,\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"5px 5px\",\n variants: {\n size: {\n ...selectNativeSize,\n true: selectNativeSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectTrigger = styled(SelectBehavior.Trigger, {\n context: SelectContext,\n displayName: \"SelectTrigger\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexWrap: \"nowrap\",\n backgroundColor: \"background hover:background-hover press:background-press\",\n borderColor: \"border-color hover:border-color-hover\",\n borderWidth: 1,\n justifyContent: \"space-between\",\n outlineColor: \"focus-visible:outline-color\",\n outlineStyle: \"focus-visible:solid\",\n outlineWidth: \"focus-visible:2px\",\n variants: {\n size: {\n ...selectFrameSize,\n true: selectFrameSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectValue = styled(SelectBehavior.Value, {\n context: SelectContext,\n displayName: \"SelectValue\",\n color: \"color\",\n ellipsis: true,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectIcon = styled(SelectBehavior.Icon, {\n context: SelectContext,\n displayName: \"SelectIcon\",\n marginLeft: \"auto\",\n children: /* @__PURE__ */ jsx(ChevronDown, {})\n});\nconst SelectGroup = styled(SelectBehavior.Group, {\n displayName: \"SelectGroup\",\n width: \"100%\"\n});\nconst SelectLabel = styled(SelectBehavior.Label, {\n context: SelectContext,\n displayName: \"SelectLabel\",\n color: \"color-10\",\n fontWeight: \"600\",\n paddingHorizontal: 10,\n paddingVertical: 6,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectItem = styled(SelectBehavior.Item, {\n context: SelectContext,\n displayName: \"SelectItem\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexWrap: \"nowrap\",\n justifyContent: \"space-between\",\n cursor: \"default\",\n outlineOffset: -1,\n borderRadius: 6,\n backgroundColor: \"hover:background-hover press:background-press focus:background-focus\",\n outlineColor: \"focus-visible:outline-color\",\n outlineStyle: \"focus-visible:solid\",\n outlineWidth: \"focus-visible:1px\",\n variants: {\n size: {\n ...selectItemSize,\n true: selectItemSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectItemText = styled(SelectBehavior.ItemText, {\n context: SelectContext,\n displayName: \"SelectItemText\",\n color: \"color\",\n userSelect: \"none\",\n ellipsis: true,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: { size: \"md\" }\n});\nconst SelectItemIndicator = styled(SelectBehavior.ItemIndicator, {\n displayName: \"SelectItemIndicator\",\n alignItems: \"center\",\n justifyContent: \"center\",\n marginLeft: \"auto\",\n children: /* @__PURE__ */ jsx(Check, { size: 14 })\n});\nconst SelectIndicator = styled(SelectBehavior.Indicator, {\n displayName: \"SelectIndicator\",\n backgroundColor: \"background-focus\",\n borderRadius: 6\n});\nconst SelectViewport = styled(SelectBehavior.Viewport, {\n displayName: \"SelectViewport\",\n backgroundColor: \"background\",\n borderColor: \"border-color\",\n borderRadius: 10,\n borderWidth: 1,\n maxHeight: 300,\n padding: 4,\n boxShadow: \"0 12px 28px rgba(0, 0, 0, 0.2)\"\n});\nconst SelectScrollUpButton = styled(SelectBehavior.ScrollUpButton, {\n displayName: \"SelectScrollUpButton\",\n alignItems: \"center\",\n backgroundColor: \"background\",\n height: 28,\n justifyContent: \"center\",\n children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 })\n});\nconst SelectScrollDownButton = styled(SelectBehavior.ScrollDownButton, {\n displayName: \"SelectScrollDownButton\",\n alignItems: \"center\",\n backgroundColor: \"background\",\n height: 28,\n justifyContent: \"center\",\n children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })\n});\nconst SelectSeparator = styled(SelectBehavior.Separator, {\n displayName: \"SelectSeparator\",\n backgroundColor: \"border-color\",\n height: 1,\n marginVertical: 4\n});\nfunction SelectRoot({ size = true, ...props }) {\n return /* @__PURE__ */ jsx(SelectNativeComponentContext.Provider, { value: SelectNative, children: /* @__PURE__ */ jsx(SelectContext.Provider, { size, children: /* @__PURE__ */ jsx(SelectBehavior.Root, { size, ...props }) }) });\n}\nconst selectParts = {\n Adapt: SelectBehavior.Adapt,\n Content: SelectBehavior.Content,\n FocusScope: SelectBehavior.FocusScope,\n Group: SelectGroup,\n Icon: SelectIcon,\n Indicator: SelectIndicator,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Separator: SelectSeparator,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport\n};\nconst Select = withStaticProperties(SelectRoot, {\n Root: SelectRoot,\n ...selectParts\n});\nexport {\n Select,\n SelectGroup,\n SelectIcon,\n SelectIndicator,\n SelectItem,\n SelectItemIndicator,\n SelectItemText,\n SelectLabel,\n SelectRoot,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n SelectViewport,\n selectParts\n};\n//# sourceMappingURL=Select.js.map\n"],"mappings":"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"}
package/dist/jsx/components/Select.native.cjs CHANGED
@@ -155,46 +155,63 @@ var selectItemSize = {
155
155
  paddingVertical: "2.5"
156
156
  }
157
157
  };
158
+ var nativeChevronStroke = function(angle) {
159
+ return `linear-gradient(${angle}deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px))`;
160
+ };
161
+ var nativeChevronPosition = function(paddingInline) {
162
+ var center = paddingInline + 8;
163
+ return `calc(100% - ${center - .25}px) 50%, calc(100% - ${center - 4.75}px) 50%`;
164
+ };
158
165
  var selectNativeSize = {
159
166
  xs: {
167
+ ...selectTextSize.xs,
160
168
  paddingInline: "2",
161
169
  paddingBlock: "1",
162
170
  borderRadius: "sm",
163
171
  gap: "1",
164
172
  height: 26,
165
- paddingRight: 28
173
+ paddingRight: 28,
174
+ backgroundPosition: nativeChevronPosition(8)
166
175
  },
167
176
  sm: {
177
+ ...selectTextSize.sm,
168
178
  paddingInline: "3",
169
179
  paddingBlock: "1.5",
170
180
  borderRadius: "md",
171
181
  gap: "1.5",
172
182
  height: 34,
173
- paddingRight: 32
183
+ paddingRight: 32,
184
+ backgroundPosition: nativeChevronPosition(12)
174
185
  },
175
186
  md: {
187
+ ...selectTextSize.md,
176
188
  paddingInline: "4",
177
189
  paddingBlock: "2",
178
190
  borderRadius: "md",
179
191
  gap: "2",
180
192
  height: 38,
181
- paddingRight: 36
193
+ paddingRight: 36,
194
+ backgroundPosition: nativeChevronPosition(16)
182
195
  },
183
196
  lg: {
197
+ ...selectTextSize.lg,
184
198
  paddingInline: "6",
185
199
  paddingBlock: "2",
186
200
  borderRadius: "md",
187
201
  gap: "2",
188
202
  height: 42,
189
- paddingRight: 44
203
+ paddingRight: 44,
204
+ backgroundPosition: nativeChevronPosition(24)
190
205
  },
191
206
  xl: {
207
+ ...selectTextSize.xl,
192
208
  paddingInline: "8",
193
209
  paddingBlock: "2.5",
194
210
  borderRadius: "lg",
195
211
  gap: "2.5",
196
212
  height: 50,
197
- paddingRight: 52
213
+ paddingRight: 52,
214
+ backgroundPosition: nativeChevronPosition(32)
198
215
  }
199
216
  };
200
217
  var SelectNative = (0, import_core.styled)(import_text.SizableText, {
@@ -206,6 +223,9 @@ var SelectNative = (0, import_core.styled)(import_text.SizableText, {
206
223
  color: "color",
207
224
  outlineWidth: 0,
208
225
  userSelect: "none",
226
+ backgroundImage: `${nativeChevronStroke(45)}, ${nativeChevronStroke(-45)}`,
227
+ backgroundRepeat: "no-repeat",
228
+ backgroundSize: "5px 5px",
209
229
  variants: { size: {
210
230
  ...selectNativeSize,
211
231
  true: selectNativeSize.md
package/dist/jsx/components/Select.native.js CHANGED
@@ -155,46 +155,63 @@ var selectItemSize = {
155
155
  paddingVertical: "2.5"
156
156
  }
157
157
  };
158
+ var nativeChevronStroke = function(angle) {
159
+ return `linear-gradient(${angle}deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px))`;
160
+ };
161
+ var nativeChevronPosition = function(paddingInline) {
162
+ var center = paddingInline + 8;
163
+ return `calc(100% - ${center - .25}px) 50%, calc(100% - ${center - 4.75}px) 50%`;
164
+ };
158
165
  var selectNativeSize = {
159
166
  xs: {
167
+ ...selectTextSize.xs,
160
168
  paddingInline: "2",
161
169
  paddingBlock: "1",
162
170
  borderRadius: "sm",
163
171
  gap: "1",
164
172
  height: 26,
165
- paddingRight: 28
173
+ paddingRight: 28,
174
+ backgroundPosition: nativeChevronPosition(8)
166
175
  },
167
176
  sm: {
177
+ ...selectTextSize.sm,
168
178
  paddingInline: "3",
169
179
  paddingBlock: "1.5",
170
180
  borderRadius: "md",
171
181
  gap: "1.5",
172
182
  height: 34,
173
- paddingRight: 32
183
+ paddingRight: 32,
184
+ backgroundPosition: nativeChevronPosition(12)
174
185
  },
175
186
  md: {
187
+ ...selectTextSize.md,
176
188
  paddingInline: "4",
177
189
  paddingBlock: "2",
178
190
  borderRadius: "md",
179
191
  gap: "2",
180
192
  height: 38,
181
- paddingRight: 36
193
+ paddingRight: 36,
194
+ backgroundPosition: nativeChevronPosition(16)
182
195
  },
183
196
  lg: {
197
+ ...selectTextSize.lg,
184
198
  paddingInline: "6",
185
199
  paddingBlock: "2",
186
200
  borderRadius: "md",
187
201
  gap: "2",
188
202
  height: 42,
189
- paddingRight: 44
203
+ paddingRight: 44,
204
+ backgroundPosition: nativeChevronPosition(24)
190
205
  },
191
206
  xl: {
207
+ ...selectTextSize.xl,
192
208
  paddingInline: "8",
193
209
  paddingBlock: "2.5",
194
210
  borderRadius: "lg",
195
211
  gap: "2.5",
196
212
  height: 50,
197
- paddingRight: 52
213
+ paddingRight: 52,
214
+ backgroundPosition: nativeChevronPosition(32)
198
215
  }
199
216
  };
200
217
  var SelectNative = (0, import_core.styled)(import_text.SizableText, {
@@ -206,6 +223,9 @@ var SelectNative = (0, import_core.styled)(import_text.SizableText, {
206
223
  color: "color",
207
224
  outlineWidth: 0,
208
225
  userSelect: "none",
226
+ backgroundImage: `${nativeChevronStroke(45)}, ${nativeChevronStroke(-45)}`,
227
+ backgroundRepeat: "no-repeat",
228
+ backgroundSize: "5px 5px",
209
229
  variants: { size: {
210
230
  ...selectNativeSize,
211
231
  true: selectNativeSize.md
package/dist/jsx/components/Select.native.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.native.js","names":[],"sources":["jsx/components/Select.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar Select_exports = {};\n__export(Select_exports, {\n Select: () => Select,\n SelectGroup: () => SelectGroup,\n SelectIcon: () => SelectIcon,\n SelectIndicator: () => SelectIndicator,\n SelectItem: () => SelectItem,\n SelectItemIndicator: () => SelectItemIndicator,\n SelectItemText: () => SelectItemText,\n SelectLabel: () => SelectLabel,\n SelectRoot: () => SelectRoot,\n SelectScrollDownButton: () => SelectScrollDownButton,\n SelectScrollUpButton: () => SelectScrollUpButton,\n SelectSeparator: () => SelectSeparator,\n SelectTrigger: () => SelectTrigger,\n SelectValue: () => SelectValue,\n SelectViewport: () => SelectViewport,\n selectParts: () => selectParts\n});\nmodule.exports = __toCommonJS(Select_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_core = require(\"@tamagui/core\");\nvar import_select = require(\"@tamagui/select\");\nvar import_text = require(\"@tamagui/text\");\nvar IconGlyph = (0, import_core.styled)(import_text.SizableText, {\n displayName: \"SelectIconGlyph\",\n color: \"color\",\n userSelect: \"none\"\n});\nvar ChevronDown = function(param) {\n var { size = 16 } = param;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconGlyph, {\n fontSize: size,\n lineHeight: 1,\n children: \"\\u25BE\"\n });\n};\nvar ChevronUp = function(param) {\n var { size = 16 } = param;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconGlyph, {\n fontSize: size,\n lineHeight: 1,\n children: \"\\u25B4\"\n });\n};\nvar Check = function(param) {\n var { size = 14 } = param;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconGlyph, {\n fontSize: size,\n lineHeight: 1,\n children: \"\\u2713\"\n });\n};\nvar SelectContext = (0, import_core.createStyledContext)({\n size: \"md\"\n});\nvar selectFrameSize = {\n xs: {\n paddingInline: \"2\",\n paddingBlock: \"1\",\n borderRadius: \"sm\",\n gap: \"1\"\n },\n sm: {\n paddingInline: \"3\",\n paddingBlock: \"1.5\",\n borderRadius: \"md\",\n gap: \"1.5\"\n },\n md: {\n paddingInline: \"4\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\"\n },\n lg: {\n paddingInline: \"6\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\"\n },\n xl: {\n paddingInline: \"8\",\n paddingBlock: \"2.5\",\n borderRadius: \"lg\",\n gap: \"2.5\"\n }\n};\nvar selectTextSize = {\n xs: {\n fontSize: \"xs\",\n lineHeight: \"xs\"\n },\n sm: {\n fontSize: \"sm\",\n lineHeight: \"sm\"\n },\n md: {\n fontSize: \"sm\",\n lineHeight: \"sm\"\n },\n lg: {\n fontSize: \"base\",\n lineHeight: \"base\"\n },\n xl: {\n fontSize: \"lg\",\n lineHeight: \"lg\"\n }\n};\nvar selectItemSize = {\n xs: {\n gap: \"1\",\n paddingHorizontal: \"2\",\n paddingVertical: \"1\"\n },\n sm: {\n gap: \"1.5\",\n paddingHorizontal: \"3\",\n paddingVertical: \"1.5\"\n },\n md: {\n gap: \"2\",\n paddingHorizontal: \"4\",\n paddingVertical: \"2\"\n },\n lg: {\n gap: \"2\",\n paddingHorizontal: \"6\",\n paddingVertical: \"2\"\n },\n xl: {\n gap: \"2.5\",\n paddingHorizontal: \"8\",\n paddingVertical: \"2.5\"\n }\n};\nvar selectNativeSize = {\n // a native <select> ignores line-height, so it gets the control height\n // (line height plus vertical padding) plus its 1px border on each side,\n // and room for the chevron\n xs: {\n paddingInline: \"2\",\n paddingBlock: \"1\",\n borderRadius: \"sm\",\n gap: \"1\",\n height: 26,\n paddingRight: 28\n },\n sm: {\n paddingInline: \"3\",\n paddingBlock: \"1.5\",\n borderRadius: \"md\",\n gap: \"1.5\",\n height: 34,\n paddingRight: 32\n },\n md: {\n paddingInline: \"4\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\",\n height: 38,\n paddingRight: 36\n },\n lg: {\n paddingInline: \"6\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\",\n height: 42,\n paddingRight: 44\n },\n xl: {\n paddingInline: \"8\",\n paddingBlock: \"2.5\",\n borderRadius: \"lg\",\n gap: \"2.5\",\n height: 50,\n paddingRight: 52\n }\n};\nvar SelectNative = (0, import_core.styled)(import_text.SizableText, {\n displayName: \"SelectNative\",\n render: \"select\",\n backgroundColor: \"background hover:background-hover\",\n borderColor: \"border-color\",\n borderWidth: 1,\n color: \"color\",\n outlineWidth: 0,\n userSelect: \"none\",\n variants: {\n size: {\n ...selectNativeSize,\n true: selectNativeSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectTrigger = (0, import_core.styled)(import_select.Select.Trigger, {\n context: SelectContext,\n displayName: \"SelectTrigger\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexWrap: \"nowrap\",\n backgroundColor: \"background hover:background-hover press:background-press\",\n borderColor: \"border-color hover:border-color-hover\",\n borderWidth: 1,\n justifyContent: \"space-between\",\n outlineColor: \"focus-visible:outline-color\",\n outlineStyle: \"focus-visible:solid\",\n outlineWidth: \"focus-visible:2px\",\n variants: {\n size: {\n ...selectFrameSize,\n true: selectFrameSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectValue = (0, import_core.styled)(import_select.Select.Value, {\n context: SelectContext,\n displayName: \"SelectValue\",\n color: \"color\",\n ellipsis: true,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectIcon = (0, import_core.styled)(import_select.Select.Icon, {\n context: SelectContext,\n displayName: \"SelectIcon\",\n marginLeft: \"auto\",\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {})\n});\nvar SelectGroup = (0, import_core.styled)(import_select.Select.Group, {\n displayName: \"SelectGroup\",\n width: \"100%\"\n});\nvar SelectLabel = (0, import_core.styled)(import_select.Select.Label, {\n context: SelectContext,\n displayName: \"SelectLabel\",\n color: \"color-10\",\n fontWeight: \"600\",\n paddingHorizontal: 10,\n paddingVertical: 6,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectItem = (0, import_core.styled)(import_select.Select.Item, {\n context: SelectContext,\n displayName: \"SelectItem\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexWrap: \"nowrap\",\n justifyContent: \"space-between\",\n cursor: \"default\",\n outlineOffset: -1,\n borderRadius: 6,\n backgroundColor: \"hover:background-hover press:background-press focus:background-focus\",\n outlineColor: \"focus-visible:outline-color\",\n outlineStyle: \"focus-visible:solid\",\n outlineWidth: \"focus-visible:1px\",\n variants: {\n size: {\n ...selectItemSize,\n true: selectItemSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectItemText = (0, import_core.styled)(import_select.Select.ItemText, {\n context: SelectContext,\n displayName: \"SelectItemText\",\n color: \"color\",\n userSelect: \"none\",\n ellipsis: true,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectItemIndicator = (0, import_core.styled)(import_select.Select.ItemIndicator, {\n displayName: \"SelectItemIndicator\",\n alignItems: \"center\",\n justifyContent: \"center\",\n marginLeft: \"auto\",\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, {\n size: 14\n })\n});\nvar SelectIndicator = (0, import_core.styled)(import_select.Select.Indicator, {\n displayName: \"SelectIndicator\",\n backgroundColor: \"background-focus\",\n borderRadius: 6\n});\nvar SelectViewport = (0, import_core.styled)(import_select.Select.Viewport, {\n displayName: \"SelectViewport\",\n backgroundColor: \"background\",\n borderColor: \"border-color\",\n borderRadius: 10,\n borderWidth: 1,\n maxHeight: 300,\n padding: 4,\n boxShadow: \"0 12px 28px rgba(0, 0, 0, 0.2)\"\n});\nvar SelectScrollUpButton = (0, import_core.styled)(import_select.Select.ScrollUpButton, {\n displayName: \"SelectScrollUpButton\",\n alignItems: \"center\",\n backgroundColor: \"background\",\n height: 28,\n justifyContent: \"center\",\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, {\n size: 16\n })\n});\nvar SelectScrollDownButton = (0, import_core.styled)(import_select.Select.ScrollDownButton, {\n displayName: \"SelectScrollDownButton\",\n alignItems: \"center\",\n backgroundColor: \"background\",\n height: 28,\n justifyContent: \"center\",\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {\n size: 16\n })\n});\nvar SelectSeparator = (0, import_core.styled)(import_select.Select.Separator, {\n displayName: \"SelectSeparator\",\n backgroundColor: \"border-color\",\n height: 1,\n marginVertical: 4\n});\nfunction SelectRoot(param) {\n var { size = true, ...props } = param;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectNativeComponentContext.Provider, {\n value: SelectNative,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContext.Provider, {\n size,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Root, {\n size,\n ...props\n })\n })\n });\n}\nvar selectParts = {\n Adapt: import_select.Select.Adapt,\n Content: import_select.Select.Content,\n FocusScope: import_select.Select.FocusScope,\n Group: SelectGroup,\n Icon: SelectIcon,\n Indicator: SelectIndicator,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Separator: SelectSeparator,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport\n};\nvar Select = (0, import_core.withStaticProperties)(SelectRoot, {\n Root: SelectRoot,\n ...selectParts\n});\n//# sourceMappingURL=Select.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"Select.native.js","names":[],"sources":["jsx/components/Select.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar Select_exports = {};\n__export(Select_exports, {\n Select: () => Select,\n SelectGroup: () => SelectGroup,\n SelectIcon: () => SelectIcon,\n SelectIndicator: () => SelectIndicator,\n SelectItem: () => SelectItem,\n SelectItemIndicator: () => SelectItemIndicator,\n SelectItemText: () => SelectItemText,\n SelectLabel: () => SelectLabel,\n SelectRoot: () => SelectRoot,\n SelectScrollDownButton: () => SelectScrollDownButton,\n SelectScrollUpButton: () => SelectScrollUpButton,\n SelectSeparator: () => SelectSeparator,\n SelectTrigger: () => SelectTrigger,\n SelectValue: () => SelectValue,\n SelectViewport: () => SelectViewport,\n selectParts: () => selectParts\n});\nmodule.exports = __toCommonJS(Select_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_core = require(\"@tamagui/core\");\nvar import_select = require(\"@tamagui/select\");\nvar import_text = require(\"@tamagui/text\");\nvar IconGlyph = (0, import_core.styled)(import_text.SizableText, {\n displayName: \"SelectIconGlyph\",\n color: \"color\",\n userSelect: \"none\"\n});\nvar ChevronDown = function(param) {\n var { size = 16 } = param;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconGlyph, {\n fontSize: size,\n lineHeight: 1,\n children: \"\\u25BE\"\n });\n};\nvar ChevronUp = function(param) {\n var { size = 16 } = param;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconGlyph, {\n fontSize: size,\n lineHeight: 1,\n children: \"\\u25B4\"\n });\n};\nvar Check = function(param) {\n var { size = 14 } = param;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconGlyph, {\n fontSize: size,\n lineHeight: 1,\n children: \"\\u2713\"\n });\n};\nvar SelectContext = (0, import_core.createStyledContext)({\n size: \"md\"\n});\nvar selectFrameSize = {\n xs: {\n paddingInline: \"2\",\n paddingBlock: \"1\",\n borderRadius: \"sm\",\n gap: \"1\"\n },\n sm: {\n paddingInline: \"3\",\n paddingBlock: \"1.5\",\n borderRadius: \"md\",\n gap: \"1.5\"\n },\n md: {\n paddingInline: \"4\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\"\n },\n lg: {\n paddingInline: \"6\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\"\n },\n xl: {\n paddingInline: \"8\",\n paddingBlock: \"2.5\",\n borderRadius: \"lg\",\n gap: \"2.5\"\n }\n};\nvar selectTextSize = {\n xs: {\n fontSize: \"xs\",\n lineHeight: \"xs\"\n },\n sm: {\n fontSize: \"sm\",\n lineHeight: \"sm\"\n },\n md: {\n fontSize: \"sm\",\n lineHeight: \"sm\"\n },\n lg: {\n fontSize: \"base\",\n lineHeight: \"base\"\n },\n xl: {\n fontSize: \"lg\",\n lineHeight: \"lg\"\n }\n};\nvar selectItemSize = {\n xs: {\n gap: \"1\",\n paddingHorizontal: \"2\",\n paddingVertical: \"1\"\n },\n sm: {\n gap: \"1.5\",\n paddingHorizontal: \"3\",\n paddingVertical: \"1.5\"\n },\n md: {\n gap: \"2\",\n paddingHorizontal: \"4\",\n paddingVertical: \"2\"\n },\n lg: {\n gap: \"2\",\n paddingHorizontal: \"6\",\n paddingVertical: \"2\"\n },\n xl: {\n gap: \"2.5\",\n paddingHorizontal: \"8\",\n paddingVertical: \"2.5\"\n }\n};\nvar nativeChevronStroke = function(angle) {\n return `linear-gradient(${angle}deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px))`;\n};\nvar nativeChevronPosition = function(paddingInline) {\n var center = paddingInline + 8;\n return `calc(100% - ${center - 0.25}px) 50%, calc(100% - ${center - 4.75}px) 50%`;\n};\nvar selectNativeSize = {\n // a native <select> ignores line-height, so it gets the control height\n // (line height plus vertical padding) plus its 1px border on each side,\n // and room for the chevron\n xs: {\n ...selectTextSize.xs,\n paddingInline: \"2\",\n paddingBlock: \"1\",\n borderRadius: \"sm\",\n gap: \"1\",\n height: 26,\n paddingRight: 28,\n backgroundPosition: nativeChevronPosition(8)\n },\n sm: {\n ...selectTextSize.sm,\n paddingInline: \"3\",\n paddingBlock: \"1.5\",\n borderRadius: \"md\",\n gap: \"1.5\",\n height: 34,\n paddingRight: 32,\n backgroundPosition: nativeChevronPosition(12)\n },\n md: {\n ...selectTextSize.md,\n paddingInline: \"4\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\",\n height: 38,\n paddingRight: 36,\n backgroundPosition: nativeChevronPosition(16)\n },\n lg: {\n ...selectTextSize.lg,\n paddingInline: \"6\",\n paddingBlock: \"2\",\n borderRadius: \"md\",\n gap: \"2\",\n height: 42,\n paddingRight: 44,\n backgroundPosition: nativeChevronPosition(24)\n },\n xl: {\n ...selectTextSize.xl,\n paddingInline: \"8\",\n paddingBlock: \"2.5\",\n borderRadius: \"lg\",\n gap: \"2.5\",\n height: 50,\n paddingRight: 52,\n backgroundPosition: nativeChevronPosition(32)\n }\n};\nvar SelectNative = (0, import_core.styled)(import_text.SizableText, {\n displayName: \"SelectNative\",\n render: \"select\",\n backgroundColor: \"background hover:background-hover\",\n borderColor: \"border-color\",\n borderWidth: 1,\n color: \"color\",\n outlineWidth: 0,\n userSelect: \"none\",\n backgroundImage: `${nativeChevronStroke(45)}, ${nativeChevronStroke(-45)}`,\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"5px 5px\",\n variants: {\n size: {\n ...selectNativeSize,\n true: selectNativeSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectTrigger = (0, import_core.styled)(import_select.Select.Trigger, {\n context: SelectContext,\n displayName: \"SelectTrigger\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexWrap: \"nowrap\",\n backgroundColor: \"background hover:background-hover press:background-press\",\n borderColor: \"border-color hover:border-color-hover\",\n borderWidth: 1,\n justifyContent: \"space-between\",\n outlineColor: \"focus-visible:outline-color\",\n outlineStyle: \"focus-visible:solid\",\n outlineWidth: \"focus-visible:2px\",\n variants: {\n size: {\n ...selectFrameSize,\n true: selectFrameSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectValue = (0, import_core.styled)(import_select.Select.Value, {\n context: SelectContext,\n displayName: \"SelectValue\",\n color: \"color\",\n ellipsis: true,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectIcon = (0, import_core.styled)(import_select.Select.Icon, {\n context: SelectContext,\n displayName: \"SelectIcon\",\n marginLeft: \"auto\",\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {})\n});\nvar SelectGroup = (0, import_core.styled)(import_select.Select.Group, {\n displayName: \"SelectGroup\",\n width: \"100%\"\n});\nvar SelectLabel = (0, import_core.styled)(import_select.Select.Label, {\n context: SelectContext,\n displayName: \"SelectLabel\",\n color: \"color-10\",\n fontWeight: \"600\",\n paddingHorizontal: 10,\n paddingVertical: 6,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectItem = (0, import_core.styled)(import_select.Select.Item, {\n context: SelectContext,\n displayName: \"SelectItem\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexWrap: \"nowrap\",\n justifyContent: \"space-between\",\n cursor: \"default\",\n outlineOffset: -1,\n borderRadius: 6,\n backgroundColor: \"hover:background-hover press:background-press focus:background-focus\",\n outlineColor: \"focus-visible:outline-color\",\n outlineStyle: \"focus-visible:solid\",\n outlineWidth: \"focus-visible:1px\",\n variants: {\n size: {\n ...selectItemSize,\n true: selectItemSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectItemText = (0, import_core.styled)(import_select.Select.ItemText, {\n context: SelectContext,\n displayName: \"SelectItemText\",\n color: \"color\",\n userSelect: \"none\",\n ellipsis: true,\n variants: {\n size: {\n ...selectTextSize,\n true: selectTextSize.md\n }\n },\n defaultVariants: {\n size: \"md\"\n }\n});\nvar SelectItemIndicator = (0, import_core.styled)(import_select.Select.ItemIndicator, {\n displayName: \"SelectItemIndicator\",\n alignItems: \"center\",\n justifyContent: \"center\",\n marginLeft: \"auto\",\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, {\n size: 14\n })\n});\nvar SelectIndicator = (0, import_core.styled)(import_select.Select.Indicator, {\n displayName: \"SelectIndicator\",\n backgroundColor: \"background-focus\",\n borderRadius: 6\n});\nvar SelectViewport = (0, import_core.styled)(import_select.Select.Viewport, {\n displayName: \"SelectViewport\",\n backgroundColor: \"background\",\n borderColor: \"border-color\",\n borderRadius: 10,\n borderWidth: 1,\n maxHeight: 300,\n padding: 4,\n boxShadow: \"0 12px 28px rgba(0, 0, 0, 0.2)\"\n});\nvar SelectScrollUpButton = (0, import_core.styled)(import_select.Select.ScrollUpButton, {\n displayName: \"SelectScrollUpButton\",\n alignItems: \"center\",\n backgroundColor: \"background\",\n height: 28,\n justifyContent: \"center\",\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, {\n size: 16\n })\n});\nvar SelectScrollDownButton = (0, import_core.styled)(import_select.Select.ScrollDownButton, {\n displayName: \"SelectScrollDownButton\",\n alignItems: \"center\",\n backgroundColor: \"background\",\n height: 28,\n justifyContent: \"center\",\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {\n size: 16\n })\n});\nvar SelectSeparator = (0, import_core.styled)(import_select.Select.Separator, {\n displayName: \"SelectSeparator\",\n backgroundColor: \"border-color\",\n height: 1,\n marginVertical: 4\n});\nfunction SelectRoot(param) {\n var { size = true, ...props } = param;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectNativeComponentContext.Provider, {\n value: SelectNative,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContext.Provider, {\n size,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Root, {\n size,\n ...props\n })\n })\n });\n}\nvar selectParts = {\n Adapt: import_select.Select.Adapt,\n Content: import_select.Select.Content,\n FocusScope: import_select.Select.FocusScope,\n Group: SelectGroup,\n Icon: SelectIcon,\n Indicator: SelectIndicator,\n Item: SelectItem,\n ItemIndicator: SelectItemIndicator,\n ItemText: SelectItemText,\n Label: SelectLabel,\n ScrollDownButton: SelectScrollDownButton,\n ScrollUpButton: SelectScrollUpButton,\n Separator: SelectSeparator,\n Trigger: SelectTrigger,\n Value: SelectValue,\n Viewport: SelectViewport\n};\nvar Select = (0, import_core.withStaticProperties)(SelectRoot, {\n Root: SelectRoot,\n ...selectParts\n});\n//# sourceMappingURL=Select.js.map\n"],"mappings":"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"}
package/dist/native.cjs CHANGED
@@ -39751,47 +39751,57 @@ var selectItemSize = {
39751
39751
  paddingVertical: "2.5"
39752
39752
  }
39753
39753
  };
39754
+ var nativeChevronStroke = (angle) => `linear-gradient(${angle}deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px))`;
39755
+ var nativeChevronPosition = (paddingInline) => {
39756
+ const center = paddingInline + 8;
39757
+ return `calc(100% - ${center - .25}px) 50%, calc(100% - ${center - 4.75}px) 50%`;
39758
+ };
39754
39759
  var selectNativeSize = {
39755
- xs: {
39760
+ xs: _objectSpread2(_objectSpread2({}, selectTextSize.xs), {}, {
39756
39761
  paddingInline: "2",
39757
39762
  paddingBlock: "1",
39758
39763
  borderRadius: "sm",
39759
39764
  gap: "1",
39760
39765
  height: 26,
39761
- paddingRight: 28
39762
- },
39763
- sm: {
39766
+ paddingRight: 28,
39767
+ backgroundPosition: nativeChevronPosition(8)
39768
+ }),
39769
+ sm: _objectSpread2(_objectSpread2({}, selectTextSize.sm), {}, {
39764
39770
  paddingInline: "3",
39765
39771
  paddingBlock: "1.5",
39766
39772
  borderRadius: "md",
39767
39773
  gap: "1.5",
39768
39774
  height: 34,
39769
- paddingRight: 32
39770
- },
39771
- md: {
39775
+ paddingRight: 32,
39776
+ backgroundPosition: nativeChevronPosition(12)
39777
+ }),
39778
+ md: _objectSpread2(_objectSpread2({}, selectTextSize.md), {}, {
39772
39779
  paddingInline: "4",
39773
39780
  paddingBlock: "2",
39774
39781
  borderRadius: "md",
39775
39782
  gap: "2",
39776
39783
  height: 38,
39777
- paddingRight: 36
39778
- },
39779
- lg: {
39784
+ paddingRight: 36,
39785
+ backgroundPosition: nativeChevronPosition(16)
39786
+ }),
39787
+ lg: _objectSpread2(_objectSpread2({}, selectTextSize.lg), {}, {
39780
39788
  paddingInline: "6",
39781
39789
  paddingBlock: "2",
39782
39790
  borderRadius: "md",
39783
39791
  gap: "2",
39784
39792
  height: 42,
39785
- paddingRight: 44
39786
- },
39787
- xl: {
39793
+ paddingRight: 44,
39794
+ backgroundPosition: nativeChevronPosition(24)
39795
+ }),
39796
+ xl: _objectSpread2(_objectSpread2({}, selectTextSize.xl), {}, {
39788
39797
  paddingInline: "8",
39789
39798
  paddingBlock: "2.5",
39790
39799
  borderRadius: "lg",
39791
39800
  gap: "2.5",
39792
39801
  height: 50,
39793
- paddingRight: 52
39794
- }
39802
+ paddingRight: 52,
39803
+ backgroundPosition: nativeChevronPosition(32)
39804
+ })
39795
39805
  };
39796
39806
  var SelectNative = styled(SizableText, {
39797
39807
  displayName: "SelectNative",
@@ -39802,6 +39812,9 @@ var SelectNative = styled(SizableText, {
39802
39812
  color: "color",
39803
39813
  outlineWidth: 0,
39804
39814
  userSelect: "none",
39815
+ backgroundImage: `${nativeChevronStroke(45)}, ${nativeChevronStroke(-45)}`,
39816
+ backgroundRepeat: "no-repeat",
39817
+ backgroundSize: "5px 5px",
39805
39818
  variants: { size: _objectSpread2(_objectSpread2({}, selectNativeSize), {}, { true: selectNativeSize.md }) },
39806
39819
  defaultVariants: { size: "md" }
39807
39820
  });
package/dist/test.cjs CHANGED
@@ -39867,47 +39867,57 @@ var selectItemSize = {
39867
39867
  paddingVertical: "2.5"
39868
39868
  }
39869
39869
  };
39870
+ var nativeChevronStroke = (angle) => `linear-gradient(${angle}deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px))`;
39871
+ var nativeChevronPosition = (paddingInline) => {
39872
+ const center = paddingInline + 8;
39873
+ return `calc(100% - ${center - .25}px) 50%, calc(100% - ${center - 4.75}px) 50%`;
39874
+ };
39870
39875
  var selectNativeSize = {
39871
- xs: {
39876
+ xs: _objectSpread2(_objectSpread2({}, selectTextSize.xs), {}, {
39872
39877
  paddingInline: "2",
39873
39878
  paddingBlock: "1",
39874
39879
  borderRadius: "sm",
39875
39880
  gap: "1",
39876
39881
  height: 26,
39877
- paddingRight: 28
39878
- },
39879
- sm: {
39882
+ paddingRight: 28,
39883
+ backgroundPosition: nativeChevronPosition(8)
39884
+ }),
39885
+ sm: _objectSpread2(_objectSpread2({}, selectTextSize.sm), {}, {
39880
39886
  paddingInline: "3",
39881
39887
  paddingBlock: "1.5",
39882
39888
  borderRadius: "md",
39883
39889
  gap: "1.5",
39884
39890
  height: 34,
39885
- paddingRight: 32
39886
- },
39887
- md: {
39891
+ paddingRight: 32,
39892
+ backgroundPosition: nativeChevronPosition(12)
39893
+ }),
39894
+ md: _objectSpread2(_objectSpread2({}, selectTextSize.md), {}, {
39888
39895
  paddingInline: "4",
39889
39896
  paddingBlock: "2",
39890
39897
  borderRadius: "md",
39891
39898
  gap: "2",
39892
39899
  height: 38,
39893
- paddingRight: 36
39894
- },
39895
- lg: {
39900
+ paddingRight: 36,
39901
+ backgroundPosition: nativeChevronPosition(16)
39902
+ }),
39903
+ lg: _objectSpread2(_objectSpread2({}, selectTextSize.lg), {}, {
39896
39904
  paddingInline: "6",
39897
39905
  paddingBlock: "2",
39898
39906
  borderRadius: "md",
39899
39907
  gap: "2",
39900
39908
  height: 42,
39901
- paddingRight: 44
39902
- },
39903
- xl: {
39909
+ paddingRight: 44,
39910
+ backgroundPosition: nativeChevronPosition(24)
39911
+ }),
39912
+ xl: _objectSpread2(_objectSpread2({}, selectTextSize.xl), {}, {
39904
39913
  paddingInline: "8",
39905
39914
  paddingBlock: "2.5",
39906
39915
  borderRadius: "lg",
39907
39916
  gap: "2.5",
39908
39917
  height: 50,
39909
- paddingRight: 52
39910
- }
39918
+ paddingRight: 52,
39919
+ backgroundPosition: nativeChevronPosition(32)
39920
+ })
39911
39921
  };
39912
39922
  var SelectNative = styled(SizableText, {
39913
39923
  displayName: "SelectNative",
@@ -39918,6 +39928,9 @@ var SelectNative = styled(SizableText, {
39918
39928
  color: "color",
39919
39929
  outlineWidth: 0,
39920
39930
  userSelect: "none",
39931
+ backgroundImage: `${nativeChevronStroke(45)}, ${nativeChevronStroke(-45)}`,
39932
+ backgroundRepeat: "no-repeat",
39933
+ backgroundSize: "5px 5px",
39921
39934
  variants: { size: _objectSpread2(_objectSpread2({}, selectNativeSize), {}, { true: selectNativeSize.md }) },
39922
39935
  defaultVariants: { size: "md" }
39923
39936
  });